结合 HTML 5 和 Angulanjs 技 术 热点 ， 让 移动 互联 网 开发 更 简单 EC 
布局 移动 网 站 和 移动 应 用 ， 切 中 企业 最 热 的 开发 需求 ee 
名 低 成 本 ， 快 速 开发 部 署 ， 还 能 足 平 台 
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内 容 简 介 


Ionic 是 目前 集 流行 与 成 熟 两 个 特点 于 一 身 的 跨 平台 移动 开发 框架 。 本 书 以 实例 驱动 讲解 的 方式 , 让 仅 有 简单 
网 页 制作 基础 知识 的 读者 ， 也 能 轻松 掌握 Ionic 下 的 移动 应 用 开发 。 

本 书 分 为 5 篇 ， 第 1 篇 是 移动 开发 准备 篇 ， 介 绍 了 Ionic、Phonegap、Cordova、HIMLS 和 移动 开发 的 一 些 基 
础 知识 ; 第 2 篇 是 Jonic 基础 知识 准备 与 常用 库 篇 , 介绍 了 配置 开发 Ionic 环境 所 依赖 的 AngularJS、SASS、Gulp、 
lodash 等 业内 主流 库 和 工具 ; 第 3 篇 是 Ionic 组 件 完全 解析 篇 ， 对 Ionic 内 置 的 CSS 样式 类 和 JavaScript 组 件 类 进 
行 完整 解析 ; 第 4 篇 是 APP 项 目 实战 篇 ， 介 绍 了 如 何 按照 业内 通行 实践 的 策划 、 设 计 、 开 发 过 程 完成 2 个 使 用 
Ionic 开发 的 完整 APP。 第 5 篇 是 发 布 和 推广 应 用 篇 , 介绍 了 在 开发 完成 之 后 ， 如 何 为 Android 和 iOS 两 大 移动 平 
台 发 布 和 推广 更 新 自己 的 APP。 

本 书 内 容 详 尽 、 实 例 丰富 ， 是 广大 HIML 5 爱好 者 、 移 动 互联 网 创业 者 、 移 动 开 发 人 员 必 备 的 参考 书 ， 同 时 
也 非常 适合 大 中 专 院 校 师 生 学 习 阅 读 ， 也 可 作为 高 等 院 校 计算 机 及 相关 专业 教材 。 
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Ionic 是 一 个 开源 免费 、 技 术 先进 ， 并 获得 业内 广泛 认可 的 跨 平 台 的 移动 开发 框架 。 它 是 
基于 主流 技术 HTML 5 和 AngularJS 的 快速 开发 工具 ， 在 极 大 地 解放 开发 创业 者 的 时 间 和 学 
习 成 本 的 同时 又 融合 了 成 熟 的 前 端 工程 技术 实践 的 成 果 。 遗 憾 的 是 ， 由 于 Ionic 涉及 了 前 端 
技术 界 各 种 先进 技术 并 不 断 演进 ， 目 前 网 络 上 为 初学 者 采纳 的 Ionic 的 中 文 资料 不 仅 散乱 不 
成 体系 ， 而 且 很 多 内 容 与 Ionic 的 官方 资料 有 较 大 的 出 入 ， 也 没有 较 好 的 开源 项 目 可 以 借鉴 。 
国内 的 初学 者 想 要 短 时 间 完全 掌握 并 成 功 上 手 开发 出 一 个 可 用 的 APP 需要 走 很 多 弯路 。 因此 
作者 结合 自己 的 学 习 与 开发 经 验 ,在 本 书 以 学 习 Ionic 开 发 的 前 置 基础 知识 如 AngularJS 框架 、 
SASS、Gulp 等 技术 面 为 起 点 ， 曾 述 了 Ionic 框架 的 所 有 组 件 使 用 方法 之 后 ， 辅 以 两 个 涵盖 前 
后 端 实现 的 Ionic 项 目 完整 解析 来 引导 学 习 者 最 终 掌 握 Ionic 框架 及 其 周边 技术 。 本 书 的 目的 
是 力求 通过 官方 权威 资料 , 理论 与 实战 项 目 相 结合 使 读者 在 练习 与 模仿 中 熟练 掌握 利用 Ionic 
快速 开发 跨 平 台 移动 APP 的 方法 ， 并 能 够 真实 地 将 技术 转化 为 经 济 利益 和 创业 成 果 。 本 书 的 
定位 就 是 为 想 在 移动 应 用 领域 找 工作 或 创业 的 人 士 提供 加 速 器 。 


本 书 是 一 本 与 众 不 同 的 书 


1. 以 练 带 学 

本 书 采用 实例 驱动 的 方式 介绍 Ionic 框架 下 的 APP 开发 。 在 介绍 书 中 重要 的 知识 点 如 
AngularJS、 应 用 的 页 面 导 航 、 调 用 移动 设备 的 硬件 功能 等 后 ， 紧 接着 就 有 实例 来 验证 与 解释 
如 何 应 用 ， 最 后 还 通过 两 个 中 型 项 目 来 复习 和 巩固 所 学 知识 点 。 

2. 跨 平台 

本 书 开发 的 项 目 是 跨 平台 应 用 ， 因 此 书 中 对 Windows 和 Mac 两 种 开发 环境 下 如 何 配置 、 
生成 与 发 布 Android 和 iOS 移动 APP 应 用 都 做 了 解析 。 

3. 案例 涵 括 Internet 和 企业 应 用 

本 书 的 项 目 案例 从 其 业务 领域 到 功能 点 设置 都 参考 了 目前 市 面 上 流行 的 Intemet 与 企业 
移动 应 用 ， 同 时 也 提供 了 读者 进一步 优化 和 打造 自己 产品 的 建议 与 外 部 参考 资源 。 

4. 低 门槛 、 浅 阅读 ， 轻 轻松 松 就 能 学 会 

为 使 本 书 更 加 详尽 易 懂 ， 每 写 完 一 章 ， 笔 者 邀请 了 想 要 跨 专 业 入 门 移动 开发 的 大 学 在 校 
生 阅 读 并 提出 意见 ， 通 过 它们 快速 分 析出 被 遗漏 的 知识 点 和 讲解 不 清 的 技术 点 ， 使 本 书 更 方 
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便 初 学 者 入 门 。 


本 书 的 知识 结构 


本 书 共 5 篇 15 章 ， 主 要 章节 规划 如 下 。 

第 一 篇 (第 1~2 章 ) 移动 开发 准备 

跨 平台 的 框架 有 很 多 ， Ionic 的 独特 优势 在 哪里 导致 它 的 风行 ? 决定 选择 它 后 ， 又 如 何 
为 它 搭建 开发 与 测试 环境 ， 并 开发 第 一 个 Hello World 应 用 ? 一 个 Ionic 的 应 用 如 何 使 用 浏览 
器 、 模 拟 器 和 实体 机 测试 ? 如 何 打 包 应 用 到 实体 机 上 ? 使 用 何 种 开发 工具 加 速 开发 进程 ? 这 
些 都 是 本 篇 要 介绍 的 内 容 。 

第 二 篇 (第 3~4 章 ) Ionic 基础 知识 准备 与 常用 库 

Ionic 构建 于 目前 先进 的 前 端 技术 框架 与 工具 集 之 上 , 不 了 解 这 些 背景 知识 点 是 无 法 正确 
理解 和 应 用 Ionic 框 架 的 强大 功能 的 .因此 本 篇 介绍 了 配置 开发 Ionic 环 境 所 依赖 的 AngularJS、 
SASS、Gulp、lodash 等 这 些 业内 主流 的 库 和 工具 ， 以 及 Ionic CLI。 最 后 以 一 个 完整 的 Ionic 
项 目 模板 的 目录 文件 结构 解析 帮助 读者 了 解 一 个 Ionic 应 用 的 构成 元 素 与 结构 。 

第 三 篇 (第 5~11 章 ) 完整 解析 Ionic 框架 的 官方 组 件 

本 篇 基于 Ionic 官方 文档 和 笔者 在 实际 项 目 中 的 经 验 ， 对 Ionic 内 置 的 CSS 样式 类 和 
JavaScript 组 件 类 进行 完整 解析 ， 并 通过 丰富 的 代码 与 效果 案例 介绍 其 使 用 场景 与 定制 途径 。 
此 外 本 篇 也 说 明了 常用 的 Cordova 插件 和 安装 使 用 方法 , 使 APP 应 用 能 够 使 用 手机 硬件 设备 
专 有 功能 如 照相 、 地 理 定位 、 震 动 ， 分 享 到 其 他 社交 应 用 等 。 

第 四 篇 (第 12~14 章 ) APP 项 目前 后 端 实战 篇 

本 篇 是 关键 的 综合 实战 篇 , 详细 介绍 了 如 何 依照 业内 通行 的 敏捷 过 程 来 进行 设计 、 开 发 ， 
从 而 完成 2 个 使 用 Ionic 开发 的 APP 应 用 。 除 了 综合 使 用 了 前 文 介 绍 的 Ionic 组 件 外 , 还 详 述 
了 如 何 配置 与 测试 后 端 服务 的 API、 集 成 高 德 地 图 、 百 度 ECharts 图 表 等 技术 ， 这 都 是 在 实 
际 的 APP 项 目 中 常常 会 遇 到 的 需求 功能 点 。 

第 五 篇 (第 15 章 ) 发 布 和 推广 更 新 APP 应 用 

内 容 不 多 ， 却 是 一 个 APP 走向 市 场 和 客户 的 最 终 一 步 。 本 篇 讲述 了 将 使 用 Ionic 框架 开 
发 的 跨 平 台 应 用 为 Android 和 iOS 两 大 平台 打包 的 完整 过 程 。 此 外 还 介绍 了 发 布 和 更 新 应 用 
的 方法 ， 使 读者 能 真正 将 开发 的 应 用 转化 为 经 济 效益 。 
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第 1 章 
< 欢迎 进入 移动 开发 的 世界 ， 


本 章 将 向 准备 进入 移动 开发 者 行列 的 读者 介绍 Ionic 的 如 何 快速 上 手 ， 以 及 使 用 Ionic 1.x 
框架 进行 移动 APP 开发 时 需要 了 解 的 一 些 行业 知识 和 基础 概念 ， 如 HIML 5、AngularJS、 
PhoneGap、Cordova、 响 应 式 布局 ， 以 及 Ionic 开发 框架 (以 下 简称 Ionic 框架 ) 。 

本 章 的 主要 知识 点 包括 : 

@ 移动 互联 网 的 特点 和 职业 前 景 。 

@ 。 跨 平 台 移动 开发 框架 。 

@ ”什么 是 Ionic 框架 以 及 是 否 该 选择 Ionic 框架 。 


移动 互联 网 行业 的 浪潮 


当下 ， 社会、 人、 事物 以 及 他 们 之 间 的 相互 联系 ， 从 未 如 此 紧密 过 。 巨 大 的 社会 变化 使 得 
- 些 传统 的 行业 市 场 快速 萎缩 , 同时 催生 大 量 新 生 行 业 与 机 会 。 各 种 职业 、 行 业 发 展 发 生 巨 大 

转折 ， 知识 、 资 讯 变 得 触手 可 及 ,信息 世界 变 得 扁平 、 寻 常 。 这 个 时 代 特 点 与 移动 互联 网 的 发 
展 息息相关 。 

移动 互联 网 被 誉 为 当今 最 具 发 展 潜力 的 行业 。 根 据 易 观 国际 《2016 年 中 国 移动 互联 网 用 
户 行为 统计 报告 》 的 分 析 结 论 : 截至 2015 年 底 中 国 移动 互联 网 用 户 数 达到 了 7.9 亿 人 ， 且 继 
续 向 经 济 欠 发 达 地 区 渗透 ， 移 动 互联 网 总 体 市 场 规 模 高 速 增长 ， 达 到 2.3 万 亿 元 ， 其 中 教育 、 
汽车 、 医 疗 、 金 融 、 旅 游 和 生活 服务 等 细 分 领域 正 或 将 迎 来 飞跃 式 发 展 。 

利用 移动 互联 网 天 生 具 有 的 三 大 特征 : 移动 化 、 个 性 化 和 差异 化 ， 有 野心 的 团队 和 个 人 完 
全 可 以 借 力 政府 推动 的 “大 众 创新 ， 万 众 创业 ”热潮 ， 牢 牢 把 握 住 移动 互联 网 的 优势 ， 加 入 这 
场 稻 麦 烈 烈 颠覆 改造 传统 行业 的 运动 。 通 过 移动 互联 网 创业 ， 改 变 命运 和 世界 ， 成 就 事业 ， 变 
得 越 来 越 有 可 能 。 

据 近 几 年 人 才 市 场 供求 情况 显示 , 传统 行业 岗位 竞争 压力 日 渐 增 大 ,然而 移动 互联 网 这 样 
的 新 型 行业 人 才 需 求 旺 盛 , 很 多 移动 互联 网 企业 陷入 了 人 才 匾 的 尴 论 境地, 这 些 企业 为 了 抢占 
先 机 ， 纷 纷 加 入 了 人 才 抢 夺 大 战 ， 有 实力 的 企业 通过 高 薪 、 高 福利 抢 走 了 大 量 的 人 才 ， 导 致 部 
分 中 小 企业 无 人 可 招 , 这 也 使 得 移动 互联 网 编程 开发 技术 岗位 成 为 高 薪 岗 位 。 从 目前 招聘 网 站 
发 布 的 职位 来 看 ， 达 到 专业 水 准 的 iOS、Android 和 Web 前 后 端 系统 开发 技术 人 员 年 薪 都 在 
20 万 以 上 ， 因 此 学 习 移动 互联 网 编程 开发 技术 就 业 前 景 自然 无 须 多 言 。 
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‖ .2 路 平台 移动 开发 框架 


对 于 技术 人 员 来 说 ， 一 个 技术 平台 路 线 的 选择 往往 决定 了 未 来 2~3 年 的 努力 方向 和 收入 
水 平 增长 速度 能 否 跟 上 和 超越 国家 货币 总 量 增 长 速度 。 为 了 提升 收入 水 平 , 主要 可 以 采用 两 种 
策略 : 
@@ 深 : 专攻 菜 方面 专门 技术 成 为 专家 ， 包 治 该 领域 内 疑难 杂 症 。 棠 尚 磨 刀 不 误 砍 柴 工 
十 年 磨 一 剑 。 
@ 快 : 跟随 社会 与 行业 动向 , 迅速 站 到 风口 抓 住 商机 , 敏捷 抢 到 头 桶 金 。 崇尚 天 下 武功 ， 
唯 快 不 破 。 


本 书 更 适合 那些 希望 从 国家 社会 民族 产业 的 大 局 入 手 , 不 过 早 拘 泥 小 节 , 使 用 第 二 个 手段 
野蛮 生长 , 把 机 会 快速 变现 成 个 人 和 团队 现金 流 的 技术 人 员 或 创业 人 士 。 当 然 作 者 不 推崇 和 强 
调 这 两 种 手段 之 间 的 对 立 。 对 技术 的 钻研 和 深入 探索 也 非常 重要 , 毕竟 知道 分 子 和 半 桶 水 是 无 
法 适应 稍微 复杂 的 商业 需求 和 后 续 演进 的 。 然 而 本 书 介绍 的 Ionic 框架 技术 ， 会 更 侧重 于 快 而 
不 是 深 。 











跨 平 台 移动 开发 框架 , 就 是 国外 的 专业 开发 团队 贴近 快速 应 变 需 求 而 推出 , 具备 敏捷 高 效 
[ 特点 的 生产 力 工具 的 产物 。 








1.2.1 什么 是 跨 平台 移动 开发 框架 


相信 本 书 的 读者 都 经 历 过 为 自己 或 家 人 朋友 购买 智能 手机 。 如 果 不 是 因为 经 济 上 的 原因 ， 
买 一 个 苹果 手机 还 是 安 卓 手机 都 有 可 能 成 为 一 个 艰难 的 选择 。 两 者 操作 系统 的 不 同 导致 了 其 上 
的 APP 应 用 文件 也 是 不 兼容 的 。 与 PC 市 场 上 微软 的 Windows 操作 系统 一 支 独 大 的 情况 相反 ， 
苹果 和 谷歌 分 别 推出 的 iOS 和 Android 移动 操作 系统 , 都 各 自 有 指定 的 技术 开发 平台 和 官方 推 
荐 的 开发 语言 。 

作为 一 个 移动 应 用 开发 者 不 得 不 做 出 取舍 ,是 做 个 专家 只 能 精通 某 一 移动 操作 系统 平台 还 
是 冒 着 什么 都 会 一 点 ， 但 又 什么 都 只 会 比 Hello World 深 一 点 的 风险 同时 兼顾 多 个 移动 操作 系 
统 平台 呢 ? 这 里 还 不 能 算 上 市 场 份额 在 不 断 丢 失 ， 说 多 了 都 是 泪 的 Windows Phone 操作 系统 。 
看 似 两 难 的 选择 题目 前 有 另外 一 个 选项 可 以 考虑 : 跨 平 台 移 动 开发 框架 。 

跨 平台 移动 开发 框架 是 指 基 本 经 过 一 次 开发 ,然后 通过 打包 工具 适 配 输 出 可 以 在 多 个 移动 
操作 系统 (也 包括 PC 操作 系统 ) 流畅 运行 并 能 调用 丰富 硬件 设备 功能 的 开发 框架 。 为 了 实现 
多 系统 之 间 的 兼容 ， 跨 平台 开发 框架 的 思路 都 是 采用 HIML 5/CSS 3/JavaScript 为 主力 开发 语 
言 平台 ,利用 移动 操作 系统 对 Web 技术 或 内 嵌 Web 浏览 器 的 支持 来 执行 代码 逻辑 ， 使 用 开发 
环境 提供 的 工具 生成 适合 各 操作 系统 平台 的 安装 文件 。 

以 本 书 主要 篇 幅 介 绍 的 Ionic vl.x 为 例 ， 从 技术 上 来 看 ， 它 是 一 款 基于 HTML 5/CSS 
3/JavaScript 的 跨 平台 开发 框架 ,使 用 它 进行 开发 的 主要 产品 是 用 于 界面 结构 的 网 页 视图 模板 、 
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定制 后 生成 的 CSS 泻 染 文件 和 包含 数据 业务 逻辑 的 JavaScript 文件 .为 了 能 够 被 安装 在 多 个 移 
动 操作 系统 上 ， 它 的 构建 命令 会 调用 底层 的 Cordova 框架 来 生成 用 于 Android 平台 安装 的 apk 
文件 和 用 于 iOS 平台 安装 的 ipa 文件 。 而 Ionic 具有 的 开发 框架 特性 ， 是 指 它 已 经 内 置 了 符合 
移动 平台 外 观 特征 和 操作 逻辑 的 一 组 预定 义 设 计 组 件 , 它 们 能 通过 AngularJS 这 个 基于 MVVM 

(Model-View-ViewModel 的 简写 ) 模式 的 业内 流行 前 端 开发 框架 完美 配合 。 使 用 Ionic 的 开 
发 人 员 并 不 用 从 头 开 始 写 HTML 5/CSS 3/JavaScript 代码 ， 而 是 站 在 业内 有 丰富 的 前 端 界面 与 
功能 组 件 开发 经 验 的 设计 师 团队 的 肩膀 上 , 通过 对 已 有 应 用 模板 的 定制 修改 扩展 , 快速 地 将 商 
业 计 划 变 成 可 以 运行 的 APP 应 用 。 




















1.2.2 为 什么 选择 跨 平 台 移动 开发 框架 
之 所 以 推荐 读者 选择 跨 平台 移动 开发 框架 ， 是 因为 它 有 以 下 优势 ; 
”一 次 编写 多 平台 兼容 


两 大 移动 操作 系统 平台 (iOS 和 Android) 均 使 用 同一 浏览 器 内 核 , 能 够 完美 支持 HIML 5 
技术 。 开 发 出 的 代码 可 以 使 用 框架 提供 的 打包 工具 生成 适 配 于 相应 平台 的 应 用 安装 包 , 以 不 断 
适应 移动 操作 系统 的 演化 而 升级 的 标准 工具 , 确保 应 用 的 兼容 性 。 而 框架 提供 的 对 底层 硬件 设 
备 的 JavaScript 访问 接口 又 保证 了 充分 发 挥 设 备 的 能 力 ， 突 破 了 HTML 5 只 能 在 Web 浏览 器 
里 渲染 的 限制 。 


@ 迅速 上 手 ， 立 即 产 出 


没有 学 过 计算 机 专业 知识 , 不 懂 C++、Java、C# 的 业余 爱好 者 或 是 创业 者 ， 也 能 够 通过 业 
余 时 间 学 习 网 上 大 量 充斥 的 免费 HIML 5/CSS 3/JavaScript 教程 ， 遵 照 开 发 框架 的 入 门 指引 开 
发 出 可 用 的 APP 应 用 。 特 别 对 于 创业 者 来 说 ， 在 事业 启动 时 如 果 能 够 Fail fast or win big 〈 快 
速 失败 或 是 获得 大 成 功 ) ， 将 有 助 于 更 快 到 达成 功 的 彼岸 或 放弃 无 谓 的 尝试 。 


@@ ”拥抱 变化 ， 贴 近 用 户 


碎片 化 的 国内 Android 应 用 市 场 和 被 苹果 任性 而 严厉 管理 的 Apple Store， 都 是 APP 应 用 
发 布 推广 和 升级 的 下 梦 。 而 通过 网 页 形式 动态 泻 染 界面 和 内 容 的 跨 平台 移动 开发 框架 , 辅 以 动 
态 加 载 组 件 , 基本 能 做 到 无 痛苦 的 更 新 推送 。 另 外 也 可 以 处 理 成 有 些 内 容 页 面 直接 访问 在 线 站 
点 ， 提 高 更 新 效率 ， 绕 开 某 些 应 用 市 场 过 于 烦琐 的 审核 机 制 。 现 实 中 虽然 不 至 于 出 现 一 夜 之 间 
把 APP 应 用 的 业务 领域 从 互联 网 金融 转向 为 020 社区 服务 的 实际 需要 , 但 具备 这 个 应 变 能 力 
是 创业 团队 和 个 人 在 这 个 残酷 的 商业 社会 生存 下 去 的 一 个 重要 保障 。 


@ ”提供 界面 框架 使 无 美工 基础 的 全 栈 开 发 者 也 能 开发 出 友好 的 用 户 界面 


因为 在 这 些 开 发 框架 中 基本 都 已 经 提供 了 定义 好 的 适合 移动 平台 的 组 件 和 样式 ,开发 人 员 
只 需要 根据 需要 选择 组 件 和 样式 即 可 。 基于 开源 技术 的 组 件 和 样式 又 都 提供 客 制 化 的 途径 , 开 
发 人 员 后 期 也 可 以 为 了 美化 界面 而 修改 框架 原生 设置 来 定制 APP 应 用 界面 。 
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1.2.3 ”可 选 的 跨 平台 移动 开发 框架 简介 


目前 在 国内 流行 的 跨 平台 移动 开发 框架 有 : Ionic、jQuery Mobile、AppCan、React Native 
等 。 类 似 的 其 他 框架 还 有 很 多 , 这 里 只 介绍 有 代表 性 和 有 活跃 开发 者 群 的。 此 外 由 于 本 书 的 主 
题 是 关于 Ionic， 因 此 将 会 集中 大 量 篇 幅 为 读者 介绍 Ionic， 以 帮助 树立 学 习 该 开发 框架 的 信心 
和 决心 。 

1. lonic 


在 2015 年 5 月 12 日 宣布 正式 发 布 的 Ionic 被 认为 是 目前 最 成 熟 和 有 潜力 的 一 款 HTML 5 
跨 平台 移动 开发 框架 。 直 观 地 看 ， 它 提供 了 很 多 符合 移动 平台 界面 观感 和 操作 逻辑 的 UI 组 
件 来 帮助 开发 者 开发 强大 的 互联 网 APP 移动 应 用 以 及 企业 APP 移动 应 用 ) 。 

Ionic 框架 的 目的 是 以 Web 的 技术 开发 移动 应 用 , 而 基于 Apache Cordova 的 编译 平台 , 实 
现 了 编译 打包 成 各 个 移动 操作 系统 平台 适 配 的 应 用 程序 包 。 

在 评估 基于 HTML 5 技术 的 APP 应 用 各 项 指标 中 ， 运 行 速度 占据 非常 重要 的 位 置 。 基 于 
Ionic 编写 的 APP 应 用 在 最 新 的 移动 设备 中 表现 卓越 ， 运 行 流畅 ， 能 让 用 户 感觉 到 用 HTML 5 
开发 的 APP 也 可 以 飞 起 来 。 

Ionic 已 经 成 为 MVVM 前 端 框架 AngularJS 的 移动 端 标准 解决 方案 .Ionic 基于 AngularJS 
创造 出 一 款 适 合 开发 者 分 离 业务 模型 、 构 建 单元 测试 的 强大 应 用 开发 框架 。 因此 Ionic 可 以 
适用 于 大 中 小 各 种 规模 的 APP 应 用 开发 和 团队 协作 。 

Ionic 为 当前 流行 的 两 种 移动 设备 而 设计 ， 并 且 有 相当 完美 的 展现 层 。 伴 随 框架 提供 的 众 
多 流行 移动 组 件 、 单 页 面 路 由 结构 、 内 置 的 用 户 界面 交互 规范 、 华 丽 且 可 扩展 定义 的 主题 和 全 
面 的 官方 文档 ， 移 动 开发 者 一 旦 上 手 就 不 愿意 离开 它 了 。 

利用 Ionic 提供 的 CLI (命令 行 接口 ， 只 需要 通过 输入 一 个 命令 就 可 以 完成 创建 应 用 初 
始 框架 ， 构 建 测试 包 ， 部 署 应 用 程序 到 指定 的 平台 设备 或 模拟 器 上 。 

安装 Ionic 消耗 的 时 间 成 本 也 非常 低 , 只 需要 在 命令 行 运行 npm install -g ionic 完毕 就 可 以 
开始 上 手 了 。 

最 值得 一 提 的 是 ，Ionic 的 开发 运营 团队 提供 了 完整 的 社区 生态 和 支持 体系 。 在 图 1.1 演 
示 的 Ionic 官方 发 现 者 (discover) 网 站 http://ionic.io/discover 里 读者 可 以 由 此 入 口 找到 关于 Ionic 
的 官方 与 社区 资源 。 

在 笔者 写本 书 的 时 候 ，Ionic 的 v2 (第 2 个 大 版 本 ) 也 于 2016 年 6 月 30 日 推出 了 Beta 
测试 版 ， 并 在 紧张 地 设计 和 编写 从 v1 平滑 迁移 升级 到 v2 的 方案 ， 可 见 基于 Ionic 开发 框架 的 
开发 者 有 乐观 的 未 来 前 景 保障 。 
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图 1.1 Ionic 官方 发 现 者 (discover) 网 站 


2 .jQuery Mobile 












jQuery Mobile 的 前 身 是 jQuery。jQuery 是 一 个 非常 流行 的 Web 程序 开发 时 使 





的 








JavaScript 类 库 ， 当 时 它 的 出 现 只 是 为 了 在 PC 端的 浏览 器 而 设计 开发 的 。 在 移动 互联 网 中 为 
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了 更 好 地 满足 浏览 器 运行 Web 程序 的 需求 , 基于 jQuery 和 jQueryUI 的 基础 上 , jQuery Mobile 
应 运 而 生 。 它 是 jQuery 在 移动 设备 上 的 版 本 ， 它 不 仅 带 来 能 够 让 主流 移动 平台 支持 的 jQuery 
核心 库 ， 还 包括 一 整套 完整 和 统一 的 移动 UI 框架 。 对 于 已 熟练 掌握 jQuery， 任务 是 编写 小 型 
APP 应 用 的 个 人 或 小 团队 来 说 ，jQuery Mobile 不 失 为 一 个 好 的 选项 。 笔 者 在 北美 搭乘 过 的 灰 
狗 (GreyHound) 公司 提供 的 简单 APP 应 用 ， 就 是 使 用 jQuery Mobile 开发 的 。 图 1.2 列 出 了 
一 些 使 用 jQuery Mobile 开发 出 的 移动 应 用 示例 。 











Featured jQuery Mobile sites from jQMGallery.com 
You will find below a great sample collection of Mobile sites built with jQuery Mobile More examples can be found in the jQM Gallery 
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图 1.2 使 用 jQuery Mobile 开发 的 移动 APP 


3 . AppCan 


AppCan 是 中 国人 自行 开发 的 基于 HIML 5 技术 的 跨 平 台 移 动 应 用 快速 开发 一 体 化 解决 方 
案 。 开 发 者 利用 HTML 5/CSS 3/JavaScript 技术 可 以 快速 地 开发 与 原生 应 用 体验 相 媲美 的 移动 
应 用 。AppCan 平台 提供 了 UI 快速 开发 框架 、 封 装 过 的 本 地 功能 调用 API 接口 、 应 用 打包 系 
统 、IDE 集成 开发 环境 和 本 地 应 用 调试 模拟 器 ， 并 预 置 数 百 套 界 面 模板 和 数 十 种 应 用 插件 ， 提 
供 多 套 应 用 模板 。 完 善 的 框架 接口 ， 人 性 化 的 开发 环境 ， 丰 富 的 开发 资源 ， 强 大 的 服务 支持 ， 
使 学 习 AppCan 的 开发 者 可 以 快速 迈 入 移动 开发 领域 。 

不 过 网 上 评论 AppCan 有 一 些 缺 点 比如 不 开源 、 无 法 修改 优化 底层 代码 、 暂 不 支持 自行 开 
发 原生 控件 、 框 架 自 带 功能 过 多 导致 应 用 安装 包 偏 大 等 。 因 此 有 一 些 早期 基于 AppCan 开发 的 
团队 慢 慢 流失 转 到 更 加 开放 和 灵活 的 PhoneGap/Cordova/Ionic 阵营 。 从 图 1.3 的 AppCan 架构 
图 来 看 ， 这 个 框架 功能 还 是 很 全 面 的 。 
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图 1.3 AppCan 移动 开发 平台 官方 架构 图 
4 . React-Native 


React-Native 是 Facebook 在 2015 年 初 Reactjs 技术 研讨 大 会 上 公布 的 一 个 开源 项 目 。 它 
支持 用 开源 的 JavaScript 库 Reactjs 来 开发 iOS 和 Android 原生 App。 在 初期 React-Native 仅 支 
持 iOS 平台 ， 同 年 9 月 份 ， 该 开源 项 目 同时 支持 Android 平台 。 

React-Native 的 原理 是 在 JavaScript 中 用 React 抽象 操作 系统 原生 的 UI 组 件 ， 代 替 DOM 
元 素来 泻 染 ， 比 如 以 <View> 取 代 <div>， 以 <Image> 蔡 代 <img> 等 。 

和 其 他 的 跨 平台 移动 Web 框架 相 比 ，React-Native 优点 显著 : 不 用 WebView， 彻 底 摆 脱 
了 WebView 让 人 不 夹 的 交互 和 性 能 问题 、React-Native 封装 的 原生 控件 有 更 好 的 触摸 滚动 体 
验 和 灵敏 的 手势 识别 、React-Native 有 更 适合 的 线程 模型 保证 了 前 台 操 作 的 流畅 性 。 

然而 目前 阶段 React-Native 的 缺点 也 比较 鲜明 : 尚未 正式 发 布 的 代码 还 在 持续 改动 ， 对 于 
技术 能 力 不 强 的 团队 很 难 跟 上 步伐 、 官 方 对 Android 平台 的 支持 依然 较 弱 , 开发 者 需要 借助 社 
区 力量 的 支持 、 提 供 的 界面 组 件 偏 少 ， 对 类 CSS 的 样式 支持 也 不 丰富 完整 。 笔 者 曾经 把 玩 过 
一 阵 React-Native， 感 觉 目前 它 虽 是 众望 所 归 的 明日 之 星 ， 但 真 要 到 达 普 罗 大 众 都 能 轻松 上 手 
完整 开发 出 一 个 APP 应 用 的 程度 ， 还 需要 加 以 一 些 时 日 来 沉淀 完善 。 笔 者 的 观点 是 开发 者 如 
无 一 定 实力 做 基础 ， 在 黑夜 里 盲目 走 在 最 前 面 可 能 会 不 容易 见 到 明天 的 太阳 。 图 1.4 中 显示 的 
React Native 开发 的 APP， 是 iOS 版 本 下 的 应 用 。 








图 1.4 React Native 开发 的 APP 应 用 启动 界面 
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1.2.4 什么 是 PhoneGap / Cordova /lonic 


在 混合 型 应 用 (Hybrid APP) 技术 里 ，PhoneGap 和 Cordova 这 两 个 词 往往 会 被 混用 。 虽 
然 本 书 主要 内 容 是 介绍 Ionic 开发 框架 ， 但 是 弄 清楚 提供 打包 支持 和 底层 硬件 设备 接口 组 件 的 
Cordova 的 来 龙 去 脉 也 有 助 于 技术 人 员 与 同行 探讨 开 文 化 。 

2008 年 8 月 , PhoneGap 在 旧金山 举办 的 让 Phone Dev Camp 上 魏 露 头角 , 起 名 为 PhoneGap 
源 于 创始 人 的 想法 : “跨越 Web 技术 和 iPhone 之 间 的 鸿沟 (Gap) ”。 当 时 PhoneGap 还 隶属 
于 Nitobe (泥土 鉴 ) 公司 。 经 过 几 个 版 本 的 更 新 ， PhoneGap 开始 支持 更 多 的 移动 操作 系统 平 
台 。 在 2011 年 , Adobe 公司 收购 了 Nitobe 公司 , 随后 Adobe 把 PhoneGap 项 目 捐献 给 了 Apache 
基金 会 ， 但 是 保留 了 PhoneGap 的 商标 所 有 权 。 而 Apache 收录 这 个 项 目 后 在 2012 年 Adobe 
PhoneGap 更 新 到 1.4 版 本 时 最 终 更 名 为 Apache Cordova。 

随后 就 出 现 了 PhoneGap 和 Cordova 两 个 名 字 经 常 被 混淆 使 用 的 状况 。 两 者 区 别 如 下 : 


@@ ”Cordova 是 Adobe 捐献 给 Apache 的 开源 项 目 名 ， 而 PhoneGap 是 Adobe 的 商业 产品 名 。 
@@ PhoneGap 产品 另外 还 包括 一 些 额外 的 属于 Adobe 的 商用 组 件 ， 例 如 PhoneGap Build 
和 Adobe Shadow。 


目前 其 实 Adobe 的 PhoneGap 产品 和 Apache 的 Cordova 项 目 维护 的 是 共同 的 一 份 源 代码 
组 件 。 最 终 我 们 可 以 把 PhoneGap 看 作 是 Apache Cordova 的 一 个 分 支 。 类 似 于 Apache Cordova 
是 一 台 发 动机 ， 运 行 在 PhoneGap 上 ， 就 像 WebKit 这 个 浏览 器 引擎 运行 在 Chrome 浏览 器 和 
Safari 浏览 器 上 。 为 了 正确 地 反映 现状 ， 本 书 使 用 的 是 Cordova 这 个 代号 ， 尽 管 很 多 时 候 两 者 
是 可 以 混用 的 。 

然而 不 是 装 了 Cordova 以 后 开发 起 跨 平台 的 APP 应 用 就 一 了 百 了 了 。Cordova 提供 的 是 比 
较 底层 的 硬件 设备 功能 库 和 APP 打包 功能 ， 而 它 对 表现 层 并 没有 任何 实现 支持 。 因 此 业内 使 
用 Cordova 开发 往往 至 少 需要 再 加 上 作为 展现 和 交互 的 UI 层 工具 或 者 框架 ， 而 Ionic 和 前 面 
提 及 的 jQuery Mobile 主要 职责 就 都 是 提供 这 部 分 UI 层 功能 。 

所 以 读者 可 以 把 Ionic 理解 成 一 个 基于 Web 技术 开发 SPA( 单 页 面 应 用 ) 的 框架 ， 通 俗 
地 说 就 是 使 用 HTML 5/CSS 3/JavaScript 开发 一 个 APP 应 用 页 面 。 

为 了 便于 大 型 项 目的 开发 协作 ，Ionic 本 身 的 组 件 和 样式 开发 分 别 集成 利用 了 AngularJS 
和 SASS/SCSS。 最 后 为 了 提供 给 开发 者 一 站 式 开发 平台 ，Ionic 又 集成 了 Cordova 的 构建 打包 
功能 ， 使 得 开发 者 最 终 可 以 直接 用 Ionic 的 CLI (命令 行 接口 ) 来 调用 Cordova 的 创建 、 编 译 、 
打包 等 功能 。 























1 .3 初 识 Ionic v1.x 


经 过 之 前 的 介绍 ， 相 信 读 者 已 经 了 解 了 跨 平台 移动 开发 框架 的 含义 以 及 使 用 它们 的 原因 。 
目前 市 面 上 经 过 大 浪 淘 沙 ， 尚 存 的 移动 开发 框架 各 具 特 色 ， 而 且 大 都 开源 免费 , 如何 选择 出 适 
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合 自己 的 那 一 款 就 成 了 开发 者 必须 要 面 对 的 问题 。 








| V1X 代表 大 版 本 为 v1.0 的 改进 修正 和 功能 增加 后 续 版 。 本 书后 面 除非 笔者 专门 指明 版 本 ， 
[ 使 用 Ionic 的 地 方 将 直接 代表 Ionic v1.x。 











1.3.1 为 什么 选择 lonic 


虽 不 能 说 在 移动 开发 领域 非常 资深 和 见 多 识 广 ,笔者 也 是 在 历经 数 月 了 解 把 玩 多 个 移动 开 
发 框架 后 最 终 选 择 了 Ionic 作为 主力 开发 平台 。 个 人 考虑 的 原因 大 概 有 以 下 几 点 ， 供 读者 借鉴 
参考 和 批判 ; 


@ ”成熟 堪 用 


从 2015 年 5 月 12 日 发 布 v1.0 正式 版 本 以 来 ， 经 过 Ionic 框架 开发 团队 不 断 改进 ， 最 近 
Github 上 该 开源 项 目的 issue 报错) 总数 趋 于 不 变 ， 新 增 的 issue 主要 集中 在 目前 处 于 Beta 
阶段 的 v2.0 版 。 除 了 能 找到 一 些 Ionic 处 于 早期 Beta 版 阶段 时 被 黑 得 伸手 不 见 五 指 的 历史 老 
帖 ， 国 内 外 的 开发 者 论坛 上 目前 对 Ionic 的 口碑 反映 都 还 不 错 。 在 stackoverflow 网 站 上 Ionic 
的 新 间 题 也 已 经 不 多 了 。 种 种 迹象 表明 现在 的 Ionic 历经 时 间 的 洗礼 ， 达 到 了 成 熟 可 控 没 有 弱 
智 bug 的 程度 。 

@ 适合 团队 协作 和 中 大 型 项 目 

通过 集成 AngularJS 和 AngularUIRouter，Ionic 框架 充分 发 挥 了 AngularJS 的 优势 。 本 书 
会 在 第 3 章 介绍 AngularJS 的 一 些 特性 。 在 这 里 读者 需要 了 解 的 就 是 , 有 了 AngularJS 做 基础 ， 
Ionic 开发 应 用 的 过 程 比 基 于 jQuery/Zepto 或 者 jQuery Mobile 框架 的 过 程 更 容易 进行 工程 质量 
管理 和 开发 团队 职责 划分 。 

@ ”相对 的 性 能 优势 

Ionic 早期 的 版 本 虽然 功能 初步 完备 , 但 是 面 对 大 数据 量 或 动画 切换 场景 时 往往 性 能 不 佳 。 
经 过 一 年 多 的 持续 改进 和 定点 优化 ， 情 况 已 经 有 很 大 改善 。 对 于 一 些 经 典 的 性 能 瓶颈 场景 ， 
Ionic 或 提供 特殊 优化 过 的 AngularJS 指令 ， 或 内 置 可 灵活 定制 的 缓存 机 制 ， 或 给 出 调整 影响 
性 能 的 开关 参数 ， 使 开发 人 员 能 无 痛 地 让 开发 出 的 应 用 在 使 用 流畅 性 上 大 致 接近 原生 应 用 。 

@ ”良好 的 社区 支持 服务 

无 论 是 目前 处 于 正式 版 的 v1.x 或 是 处 于 Beta 版 的 v2.0, Ionic 都 有 专人 在 社区 进行 问题 解 
答 和 在 Github 跟踪 解决 ssue。 对 于 有 bug 暂 未 解决 的 部 分 ， 官 方 文档 网 站 也 都 会 及 时 明确 提 
示 ， 使 开发 者 能 够 避 开 和 雷 区 。 

@ ”完整 的 开发 构建 工具 链 

在 完成 第 2 章 的 Ionic 开发 调试 环境 安装 后 ， 通 过 使 用 NPM、Gulp、Bower、Gordova 和 
Ionic CLI 一 起 组 成 的 工具 链 ， 就 能 快速 进入 APP 应 用 的 和 迭代 开发 测试 阶段 ， 节 省 传统 开发 中 
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大 量 的 无 效 时 间 。 相 信 读 者 在 后 面 章节 的 动手 实验 环节 中 将 能 深入 感受 到 这 一 点 带 来 的 便利 。 


1.3.2 基于 Web 技术 HTML 5/CSS 3/JavaScript 


大 体 上 基于 Ionic 框架 的 开发 可 以 理解 成 开发 一 个 基于 Web 技术 开发 SPA( 单 页 面 应 用 )， 
通俗 地 说 就 是 使 用 HTML 5/CSS 3/JavaScript 开发 一 个 APP 应 用 页 面 。 可 能 有 些 读者 未 曾 了 解 
和 接触 过 AngularJS 和 SASS/SCSS 技术 ， 目 前 可 以 把 AngularJS 理解 为 完全 基于 JavaScript 开 
发 的 框架 ， 而 SASS/SCSS 只 是 用 于 最 终生 成 CSS 代码 的 过 程 文件 。 因 此 具备 HTML 5/CSS 
3/JavaScript 基础 知识 的 开发 者 ， 是 有 能 力 快 速 入 门 和 产 出 的 。 























性 元 | 本 书 因 为 聚焦 于 主题 和 控制 篇 幅 的 关系 ， 虽 然 会 对 出 现 的 重要 代码 进行 解释 ， 但 不 提供 
| HTML 5/CSS 3/JavaScript 的 入 门 介绍 。 读 者 可 以 自行 选择 书籍 或 者 网 上 教程 来 学 习 掌握 这 
些 基 础 知识 。 














从 图 1.5 的 示例 图 中 读者 可 以 发 现 ， 一 个 使 用 Ionic 框架 开发 的 APP 应 用 主要 有 效 运行 代 
码 就 是 主 HTML 文件 + 主 CSS 文件 + 若干 JavaScript 文件 构成 。 





localhost 


内 村 JS 指 令 与 最 务 示例 素 引 


图 1.5 使 用 Ionic 框架 开发 的 APP 应 用 代码 构成 
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1.3.3 基于 AngularJS 框架 


选择 基于 AngularJS 框架 ，Ionic 开发 团队 应 该 是 经 过 深思 熟 虑 的 ， 虽然 最 近 在 ReacUS 大 
火 之 后 出 现 了 很 多 对 AngularJS 诉 病 的 声音 。 

AngularJS 建立 在 这 样 的 信念 上 : 应 该 把 声明 式 编程 用 于 构建 用 户 界面 以 及 编写 软件 构建 ， 
而 指令 式 编程 非常 适合 来 表示 业务 逻辑 。AngularJS 框架 采用 并 扩展 了 传统 HTML， 它 设计 了 
双向 的 数据 绑 定 来 适应 动态 内 容 刷新 ,这 种 双向 数据 绑 定 允 许 模型 和 使 用 模型 数据 来 完成 界 
演 染 的 多 视图 之 间 的 自动 同步 。 因 此 ，AngularJS 使 得 引入 jQuery 这 样 的 库 来 对 DOM 的 操作 
不 再 重要 并 提升 了 可 测试 性 。 

AngularJS 完成 了 以 下 的 设计 目标 : 


@ ”将 应 用 逻辑 与 对 DOM 的 操作 解 耦 ， 这 能 提高 代码 的 可 测试 性 。 

@ ”将 应 用 程序 的 测试 看 的 跟 应 用 程序 的 编写 一 样 重要 , 而 代码 的 模块 构成 方式 对 编写 单 
元 测试 的 难度 有 巨大 的 影响 。 

@ ”将 应 用 程序 的 客户 端 与 服务 器 端 解 辜 ， 这 允许 客户 端 和 服务 器 端的 开发 可 以 分 头 行 
动 ， 并 且 让 双方 的 复 用 成 为 可 能 。 

@ ”指导 和 约束 开发 者 构建 应 用 程序 的 整个 历程 : 从 用 户 界面 的 设计 ， 到 编写 业务 逻辑 ， 
再 到 测试 。 


AngularJS 实现 了 MVVM 模式 ， 并 鼓励 模型 、 视 图 和 视图 -模型 组 件 之 间 的 松 耦 合 。 通 过 
依赖 注入 (dependency injection) ，Angular 为 客户 端的 Web 应 用 引入 了 传统 服务 端 开发 常用 
的 模式 实践 。 

相对 jQuery 这 类 库 来 说 ，AngularJS 是 一 个 复杂 完善 的 系统 级 框架 ， 因 此 学 习 和 上 手 都 需 
要 相对 花费 更 多 的 时 间 和 精力 。 本 书 第 3 章 将 为 未 曾 接触 过 AngularJS 框架 的 读者 介绍 Ionic 
开发 中 需要 了 解 的 基础 概念 。 


























| 在 图 1.5 中 似乎 未 曾 出 现 对 AngularJS 框架 文件 的 引用 ， 事 实 是 Ionic 已 把 AngularJS 
[ 框架 文件 的 内 容 包 含 到 名 为 ionic.bundlejs 的 打包 文件 中 , 有 兴趣 的 读者 可 以 自行 阅读 
代码 验证 。 








1.3.4 接近 原生 APP 应 用 的 炫丽 界面 组 件 


Ionic 提供 了 模拟 参照 iOS 和 Android 平台 上 的 原生 移动 应 用 布局 和 众多 移动 端 界 面 组 件 。 
这 些 布局 和 交互 型 组 件 都 带 有 可 调整 的 动画 效果 和 支持 触摸 手势 事件 。 因 此 Ionic 在 为 技术 人 
员 提 供 快 速 开 发 能 力 的 同时 ,又 最 大 程度 兼顾 了 用 户 友好 性 和 界面 美观 。 更 有 其 者， 界面 设计 
的 专业 开发 者 在 Ionic 界面 组 件 的 基础 上 实践 了 Material Design 的 概念 ， 推 出 了 有 更 多 开源 炫 
丽 界面 组 件 的 网 站 http://ionicmaterial.com/。 该 网 站 也 提供 了 如 图 1.6 所 示 的 模拟 界面 预览 组 件 
供 学 习 参 考 。 
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图 1.6 Ionic Material 网 站 提供 的 界面 组 件 预览 


本 书 第 5~9 章 将 会 逐一 详细 介绍 Ionic 提供 的 各 种 界面 组 件 ， 有 兴趣 的 读者 可 以 提前 翻 看 
组 件 示例 图 来 了 解 。 


1.3.5” 自 适应 (Responsive) 布局 


移动 设备 已 经 慢 慢 超过 桌面 设备 ， 成 为 访问 互联 网 的 最 常见 终端 。 然 而 Android 设备 屏幕 
大 小 分 布 的 碎片 化 使 开发 者 不 得 不 面 对 一 个 难题 :如 何 才能 在 不 同 大 小 的 设备 上 使 同样 的 内 容 
呈现 时 更 加 自然 友好 ? 

2010 年 ，Ethan Marcotte 提出 了 “ 自 适 应 网 页 设计 ” (Responsive Web Design) 这 个 名 词 。 
它 指 可 以 自动 识别 屏幕 宽度 、 并 做 出 相应 调整 的 网 页 设计 。 图 1.7 展现 的 就 是 同一 网 页 在 浏览 
器 调整 为 四 种 不 同 宽度 时 自动 调整 布局 结构 的 示例 。 














图 1.7 支持 自 适应 布局 的 页 面 
Ionic 框架 已 经 内 置 了 自 适 应 布局 的 支持 ， 它 额外 提供 了 三 个 不 同 响应 式 CSS 类 默认 样式 





用 于 区 分 手机 竖 屏 与 横 屏 、 平 板 竖 屏 与 横 屏 这 四 种 宽度 布局 类 别 。 另 外 开发 者 也 可 以 自 定义 更 
多 的 响应 式 CSS 类 满足 特殊 需要 。 本 书 的 5.1.5 节 将 会 举例 介绍 Ionic 框架 的 这 个 特性 和 使 月 
定制 方法 。 
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1.3.6 支持 个 〈 任 ) 性 定制 


本 章 的 1.3.4 节 笔 者 提 到 Ionic 内 置 了 多 组 适应 布局 和 交互 型 组 件 。 这 些 开 箱 即 用 ， 功 能 
完善 、 界 面 完 美的 组 件 集 能 够 满足 大 多 数 开发 场景 的 需要 。 但 世界 并 不 总 是 那么 如 意 , 可 能 
某 些 时 候 开 发 者 需要 应 对 自己 或 他 人 的 脑 洞 大 开 ， 必 须 将 已 有 组 件 做 各 种 个 性 化 更 改 的 局 面 。 

提前 考虑 到 这 一 点 的 Ionic 团队 在 开发 组 件 的 样式 CSS 类 时 放 开 了 本 书 第 4 章 将 要 介绍 的 
SASS/SCSS, 将 CSS 更 动态 化 ， 此 外 再 结合 本 书 第 10 章 将 要 介绍 的 设备 信息 服务 组 件 ， 开 发 
者 就 能 依据 移动 设备 的 硬件 参数 和 平台 资源 配置 ， 将 应 用 定制 成 任意 的 模样 。 

















1.3.7 lonic 的 缺点 


前 面 介绍 了 一 大 堆 使 用 Ionic 框架 做 跨 平 台 移动 应 用 开发 的 优势 ， 但 是 理性 最 终 总 能 战胜 
狂热 ， 读 者 有 必要 了 解 Ionic 与 生 俱 来 的 一 些 缺陷 ， 从 而 知道 不 适合 使 用 Ionic 的 环境 或 者 需 
要 提前 筹划 规避 的 深 坑 。 

经 过 近 2 年 全 球 开发 人 员 的 使 用 ， 基 本 对 Ionic 存在 的 缺点 达成 了 共识 : 


@ Hybrid (混合 ) 模式 开发 的 应 用 自 有 的 性 能 缺陷 。 


由 于 应 用 的 逻辑 执行 是 基于 浏览 器 所 带 的 JavaScript 动态 代码 在 界面 主线 程 上 执行 ， 因此 
在 低 端 Android 设备 上 性 能 缺陷 严重 ， 用 户 操控 时 卡 顿 感 很 明显 。 好 在 随 着 Android 设备 提供 
商 的 硬件 跑 分 残酷 竞争 , 目前 市 面 所 售 的 智能 手机 使 用 Ionic 开发 出 的 APP 应 用 与 原生 应 用 相 
比 已 经 基本 无 差异 感 了 。 不 过 即使 如 此 ，Ionic 也 不 能 用 于 有 较 高 实时 图 形 响应 要 求 的 游戏 开 
发 。 


@ ”深度 依赖 于 AngluarJS 框架 。 


AngluarJS 框架 在 为 Ionic 带 来 各 种 好 处 的 同时 ， 也 带 来 了 初学 者 学 习 曲 线 陡峭 (这 对 那 
些 笔 者 极端 仰慕 的 天 资 聪颖 者 当然 例外 ) ,深刻 理解 的 人 用 起 来 效率 很 高 , 不 理解 的 用 了 到 处 
是 坑 的 局 面 。 而 对 AngluarJS 框架 的 深度 依赖 ， 也 让 Ionic 在 AngluarJS 开发 团队 开发 其 2.0 版 
本 时 决定 重 起 炉灶 抛弃 以 前 的 架构 的 时 候 处 境 乾 从 ， 不 得 不 有 点 被 胁迫 地 将 Ionic 框架 同步 升 
级 为 2.0 版 本 ， 将 开发 使 用 的 主力 语言 从 JavaScript 转 为 微软 主导 开发 的 TypeScript。 


@ ”深度 依赖 Cordova 插件 提供 硬件 设备 的 接口 。 


当 没 有 相应 的 Cordova 插件 提供 想 要 的 硬件 设备 的 接口 时 ， 开 发 人 员 需 要 自己 分 别 编写 
iOS 和 Android 平台 的 插件 。 当 然 这 种 情形 出 现 的 几率 并 不 大 。 

@ Windows Phone 支持 比较 弱 。 

Ionic 的 官方 网 站 已 经 基本 没有 关于 Windows Phone 的 开发 内 容 。 好 在 Windows Phone 的 
市 场 也 已 经 日 暮 西 山 ， 这 部 分 微软 死 忠 用 户 的 价值 基本 不 用 恼 记 了 。 

在 笔者 看 来 ， 对 于 开发 应 用 型 的 技术 ,应 该 也 本 着 “ 合 则 用 ,不 合 则 弃 ” 的 原则 来 决定 是 
否 投入 精力 来 学 习 。 读 者 需要 根据 Ionic 的 优 缺 点 、 自 身 的 技术 积累 优势 和 计划 编写 的 移动 
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APP 的 特点 来 考虑 是 否 要 使 用 Ionic 框架 。 


1.3.8 lonic 的 商业 案例 


从 Ionic 的 Beta 版 开始 , 国外 就 已 经 有 众多 的 个 人 开发 者 和 公司 开始 追踪 和 试用 这 个 据 称 
是 混合 开发 的 神器 ， 从 此 诞生 了 不 少 使 用 Ionic 框架 开发 的 APP 应 用 。 目 前 据 Ionic 网 站 的 官 
方 统计 ， 已 有 超过 120 万 移动 APP 应 用 是 用 Ionic 框架 来 构建 的 。 感 兴趣 的 读者 可 以 到 
http://showcase.ionicframework.com/ 查 找 一 些 被 Ionic 官方 推荐 的 应 用 列表 ， 如 图 1.8 所 示 。 





pacifi a 


Dale Beermann 





TOP APPS 





DUUD 


B 











2 ea 


图 1.8 Ionic 官方 推荐 的 APP 应 用 
考虑 到 大 部 分 购买 本 书 的 读者 更 关注 Ionic 的 中 文 资料 和 在 国内 互联 网 的 使 用 ， 这 里 作者 
也 列 出 了 专门 以 Ionic 为 主题 的 技术 论坛 的 网 页 http://ionichina.com/showcase 上 展示 的 基于 
Ionic 开发 的 部 分 APP 应 用 ， 如 图 1.9 所 示 。 
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图 1.9 国内 团队 使 用 Ionic 开发 的 部 分 APP 应 用 


1.3.9 lonic 的 开源 案例 


学 习 和 提升 IT 开发 技术 的 最 好 方式 就 是 大 量 阅读 其 他 优秀 开发 者 的 代码 。 在 Ionic 的 官方 
网 站 同时 也 维护 了 为 初学 者 准备 的 很 多 基于 Ionic 框架 开发 的 APP 应 用 开源 案例 , 感 兴趣 的 读 
者 可 以 去 自行 登录 下 载 学 习 http://market.ionic.io/starters， 如 图 1.10 所 示 。 
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® ® 四 








图 1.10 Ionic 的 开源 案例 网 站 页 面 示例 


1.3.10 “lonic 的 未 来 一 一 lonic v2.0 & AngularJS v2.0 


OD Starters -Ioric Markety ] 
DX marketionicio/starters EWI MS 
图 market sanes puo eme cn aanip 攻 T7 | 
h 
全 
你 Starters 
T 














在 笔者 编写 本 书 的 时 候 (2016 年 7 月 ) ， 下 一 个 版 本 的 Ionic 和 AngularJS 都 处 于 Beta 


版 的 状态 ， 有 业内 人 士 判 断 它们 将 于 2016 年 底 前 成 为 正式 版 。 
尽管 AngularJS v1.x 非常 成 功 ， 但 是 AngularJS v2.0 的 剧烈 转向 也 许 更 值得 期 待 。 


AngularJS 当初 是 提供 给 设计 人 员 用 来 快速 构建 HTML 表单 的 一 个 内 部 工具 。 随 着 时 间 的 
推移 ， 各 种 特性 被 加 入 进去 以 适应 不 同 场景 下 的 应 用 开发 。 然 而 由 于 最 初 的 架构 限制 〈 比 如 绑 
定 和 模板 机 制 ) ， 性 能 的 提升 已 经 非常 困难 了 。 在 语言 方面 ，ECMAScript6 的 标准 已 经 完成 ， 
这 意味 着 浏览 器 将 很 快 支持 例如 模块 、 类 、lambda 表达 式 、generator 等 新 的 特性 ， 而 这 些 特 
性 将 显著 地 改变 JavaScript 的 开发 体验 。 在 开发 模式 方面 ，Web 组 件 也 将 很 快 实现 。 然 而 现 有 
的 框架 , 包括 AngularJS vl.x 对 Web 组 件 的 支持 都 不 够 好 。 此 外 AngularJS v1.x 没有 针对 移动 
应 用 特别 优化 ， 并 且 缺 少 一 些 关键 的 特性 ， 比 如 : 缓存 预 编 译 的 视图 、 触 控 支持 等 (这 些 部 分 


在 Ionic 框架 里 有 一 些 相应 的 补足 增强 ) 。 
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AngularJS v2.0 的 开发 团队 怀 着 野心 重 起 炉灶 来 解决 这 些 问 题 。 由 于 目前 还 是 未 稳定 的 
Beta 版 ， 本 书 不 会 过 多 着 黑 于 它 。 前 面 在 1.3.7 节 笔 者 提 到 过 Ionic 开发 团队 追随 着 AngularJS 
的 升级 步伐 同时 也 在 着 手 升级 到 Ionic v2.0 的 工作 。 虽然 目前 处 于 Beta 版 的 状态 让 笔者 觉得 也 
不 宜 过 早 吹捧 ， 但 是 Ionic 开发 团队 在 官方 博客 里 承诺 已 经 重新 思考 和 进行 反复 沙盘 推 沉 ， 将 
要 推出 能 使 性 能 得 到 极度 提升 , 开发 人 员 需 要 编写 的 代码 结构 复杂 性 得 到 大 幅 削 减 , 可 定制 性 
更 上 一 层 楼 的 Ionic v2.0 开发 框架 .图 1.11 展示 了 Ionic 对 AngularJS v2.0 和 Ionic v2.0 的 信心 。 
对 此 承诺 半信半疑 和 对 Ionic 的 未 来 有 兴趣 了 解 的 读者 可 以 到 Ionic 官方 关于 Ionic v2.0 的 文档 
参考 子 站 点 http:Wionicframework.com/docs/v2 先睹为快 。 


人 Ov - 


























图 1.11 Ionic v2.0 和 AngularJS v2.0 的 官方 宣传 图 片 


学 习 完 本 书 找 工作 与 创业 


天 下 申 钻 , 皆 为 利 来 ;天 下 捷 接 , 皆 为 利 往 。 笔 者 不 排除 少 部 分 人 怀 着 "write the code, change 
the world” 的 伟大 理想 进入 IT 行业 ， 但 这 个 社会 大 部 分 人 学 习 钻 研 技 术 还 是 为 了 个 人 求生 存 
谋 发 展 的 。 虽 然 笔者 不 能 算是 IT 界 和 移动 开发 领域 的 老司 机 ， 但 是 本 节 还 是 霸王 硬 上 马 尝试 
探讨 一 下 学 完 本 书后 未 来 的 出 路 问题 。 


1.4.1 ”从 本 书 的 项 目 实战 开始 准备 技术 作品 

本 书 为 了 贴近 读者 要 求 介绍 学 习 的 技术 如 何 进行 完整 实战 演练 的 呼声 , 在 第 13 章 和 第 14 
章 模拟 了 如 何 快速 策划 、 设 计 、 开 发 完成 2 个 使 用 Ionic 框架 开发 的 示例 APP。 这 里 的 完整， 
指 的 是 还 包括 后 端的 API 设计 实现 代码 。 

需要 找 移动 开发 领域 工作 的 读者 ， 在 完成 本 书 学 习 后 ， 可 以 以 这 两 个 APP 为 基础 ， 自 行 
改写 扩充 或 是 不 断 完善 成 你 自己 的 项 目 , 面试 时 就 有 值得 深入 的 话题 可 谈 , 有 信心 展示 实力 的 
作品 可 展现 了 。 

此 外 本 章 的 1.3.9 节 里 提供 的 Ionic 开源 案例 网 站 ， 也 可 以 成 为 读者 发 掘 借鉴 优秀 开发 者 
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作品 源 代码 的 宝库 。 


1.4.2 lonic 助力 实现 你 的 创业 梦想 


对 于 值得 尊敬 的 创业 者 和 创业 团队 来 说 , 梦想 的 翅膀 插 上 之 后 , 还 得 尽量 多 扑 腾 几 下 。 创 
业 团 队 要 打造 一 个 产品 原型 ， 一 般 需 要 几 个 角色 : 业务 主导 人 、 产 品 经 理 、 开 发 工程 师 、UI 
设计 师 。Ionic 框架 主要 是 给 其 中 的 开发 工程 师 和 UI 设计 师 角色 配合 使 用 的 ， 当 然 如 果 创 业者 
能 身 兼 数 职 ， 推 出 产品 原型 的 过 程 将 会 是 无 比 顺畅 。 

学 习 和 使 用 Ionic 框架 ， 有 助 于 创业 过 程 中 低 成 本 地 快速 试 错 野蛮 生长 ， 这 已 经 是 国内 外 
多 个 创业 团队 的 共识 了 。 希望 你 们 能 在 阅读 本 书后 通过 努力 , 迅速 找到 风口 ,依靠 方 校长 建造 
的 独 有 防火 墙 生态 优势 ， 早 日 让 国人 用 上 中 国 特色 的 移动 APP 应 用 。 


1 .5 小 结 


本 章 从 移动 互联 网 行业 的 热潮 入 手 ， 逐 步 曾 明了 跨 平 台 移 动 框架 中 的 Ionic 是 一 个 值得 深 
入 学 习 使 用 的 开发 平台 。 此 外 本 章 介绍 Ionic 的 诸多 优势 和 特性 ， 在 后 续 的 章节 中 ， 读 者 将 会 
一 一 学 习 和 接触 到 这 些 部 分 。 
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第 2 章 
4lonic 的 开发 调试 环境 受 蕉 > 


本 章 将 介绍 使 用 Ionic 框架 开发 前 需要 安装 的 开发 环境 。 根据 第 1 章 的 介绍 ，Ionic 依赖 于 
Cordova 框架 ， 此 外 开发 出 来 的 APP 应 用 也 需要 适 配 iOS 和 Android 两 种 移动 操作 系统 平台 ， 
因此 在 能 够 使 用 Ionic 构建 出 两 种 操作 系统 的 安装 包 前 ， 有 比较 严格 的 安装 步骤 需要 完成 。 本 
章 的 主要 知识 点 包括 : 

@ Tonic 开发 运行 环境 安装 

@ Windows 下 Android 开发 平台 安装 

@ ”Apple OSX 下 iOS 与 Android 开发 平台 安装 

@ ”推荐 的 代码 编辑 工具 Sublime 配置 


























Ionic 快速 上 手 环境 安装 


Ionic 开发 调试 环境 是 基于 Nodejs 运行 的 ， 而 Ionic 的 公开 源 代码 包 又 托管 在 Github 上 。 
因此 安装 Ionic 的 正式 开发 调试 环境 前 ， 需 要 有 一 些 前 置 的 平台 工具 先 能 成 功 运行 。 本 节 将 依 
次 介绍 这 些 平台 工具 的 安装 和 对 它们 的 功能 进行 简单 说 明 。 








隐 慰 本 节 涉 及 的 软件 包 安 装 过 程 在 Windows 和 Apple OS X 下 基本 一 致 ,读者 基本 可 以 登录 这 
些 软件 的 官网 自行 解决 安装 中 遇 到 的 问题 。 因 此 碍 于 篇 幅 关 系 ， 笔 者 在 本 节 不 详细 介绍 

Apple OS 义 操作 系统 环境 下 的 安装 过 程 ， 而 只 以 占 读者 比例 最 多 的 Windows 操作 系统 环 
境 来 演示 。 如 确实 有 特殊 明显 的 区 别 ， 笔 者 会 在 具体 的 章节 里 依据 情况 说 明 。 











2.1.1 安装 Nodejs 和 NPM 

1 . 什么 是 Node.js 和 NPM 

Node.js 是 让 JavaScript 脱离 浏览 器 运行 在 服务 器 的 一 个 平台 ， 而 不 是 一 个 新 的 语言 或 者 
库 。 虽 然 Nodejs 采用 的 是 单线 程 机 制 ， 但 是 它 通 过 异步 IO 与 事件 驱动 的 设计 来 实现 了 高 并 
发 服务 。 此 外 Nodejjs 内 建 一 个 HTTP 服务 器 可 方便 地 用 于 测试 和 生产 运行 。 在 APP 应 用 开发 
的 过 程 中 ， 我 们 将 要 在 浏览 器 中 调试 的 Ionic 代码 就 是 通过 Nodejs 的 HITP 服务 来 响应 请 求 
和 执行 文件 修改 后 动态 reload (重新 加 载 ) 机 制 ， 因 此 能 够 运行 Nodejs 是 成 功 安装 Ionic 的 前 
提 条 件 。 









































NPM 是 Nodejs 的 包 管 理 器 ， 它 已 经 被 自动 包含 在 目前 Nodejs 的 安装 包 里 ， 不 再 需要 单 
独 安装 。 在 使 用 Ionic 的 CLI 生成 完 Ionic 工程 目录 和 描述 工程 所 用 到 的 Nodejs 代码 包 的 配置 
文件 packagejson 之 后 ，NPM 会 被 自动 调用 以 下 载 安装 这 些 Nodejs 代码 包 。 
































及 元 | 本 书 不 是 关于 Nodejs 的 入 门 书 ， 因 此 不 会 花 过 多 笔墨 介绍 Nodejs 和 NPM。 感 兴趣 的 读 
\ 者 可 以 到 这 两 个 软件 的 官网 自行 阅读 文档 学 习 。 





2 . 安装 Nodejs 和 NPM 


笔者 编写 本 书 时 ， 可 以 成 功 安装 运行 Ionic 的 Nodejs 版 本 为 v4.4.2， 因 此 建议 读者 可 以 在 
开发 机 的 命令 行内 输入 


判断 是 否 已 经 安装 了 正确 的 Nodejs 和 NPM 版 本 ， 如 图 2.1 所 示 。 
画 命令 提示 符 = ge 


















图 2.1 查看 当前 操作 系统 安装 的 Nodejs、NPM 和 CNPM 版 本 


如 果 Nodejs 未 安装 或 者 版 本 太 旧 需要 升级 ， 建 议 读者 到 图 2.2 中 显示 的 Nodejs 的 官网 
https://nodejs.org/en/download/， 根 据 所 使 用 的 操作 系统 选择 对 应 的 Nodejs 包 安 装 。 












Downloads 


Download the Node.js source code or a pre-built installer for your platform, and start developing today. 








Macintosh Installer Source Code 


Current 


Latest Features 











Windows Installer (.msi) 

Windows Binary (.exe) 

Mac OS X Installer (.pkg) 

Mac OS X Binaries (targz) 

Linux Binaries (tarxz) 3 4 


Source Code 





图 2.2 Nodejs 的 官网 下 载 选 择 安装 包 
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日 于 中 国 国情 的 关系 ,使 用 NPM 下 载 安装 某 些 软件 包 时 需要 使 用 一 些 不 可 详细 描述 的 技 
术 手 段 改变 联网 状态 。 因 此 推荐 读者 在 安装 或 升级 完 Nodejs 后 运行 以 下 命令 安装 淘宝 提供 的 
NPM 软件 包 库 的 镜像 CNPM， 安 装 命令 的 成 功 输出 如 图 2.3 所 示 。 


npm install -g cnpm --registry=https://registry.npm.taobao.org 














[ 画 ss 技 四 加 二 二 | 











图 2.3 使 用 NPM 安装 CNPM 


命令 成 功 执行 完毕 后 ， 以 后 使 用 npm 命令 的 地 方 就 都 可 以 用 cnpm 来 代替 了 。 








本 书 介绍 的 关于 CNPM 的 内 容 也 许 会 时 间 流 逝 而 可 能 不 再 正确 。 上 有 具体 权威 的 cnpm 
说 明和 其 提供 的 专 有 命令 请 参考 CNPM 的 官网 : https://npm.taobao.org/。 





到 目前 为 止 ，Nodejs 和 NPM 的 安装 就 算 基 本 完成 了 ， 读 者 可 以 回顾 一 下 图 2.1， 运 行 图 
中 的 3 个 命令 检查 一 下 开发 机 的 软件 版 本 是 否 正确 〈 版 本 号 大 于 等 于 图 中 数字 即 可 ) 。 


2.1.2 安装 Git 

Git 是 目前 世界 上 最 先进 的 分 布 式 版 本 控制 系统 。 和 Git 出 现 前 流行 的 集中 式 的 版 本 控制 
系统 CVS、SVN 及 收费 版 的 ClearCase 相 比 ，Git 所 代表 的 分 布 式 版 本 控制 系统 为 开发 者 带 来 
了 极 大 的 便利 性 , 同时 丢失 代码 的 可 能 性 也 减 小 很 多 。 目 前 基本 所 有 的 开源 项 目 都 发 布 在 使 用 
Git 的 Github 网 站 上 ，Ionic 开发 框架 这 个 开源 项 目 也 是 如 此 《项 目 在 Github 的 网 址 为 
https://github.comy/driftyco/ionic/tree/1.X) 。 

因此 使 用 Ionic 框架 的 开发 者 ， 需 要 在 开发 机 安装 好 Git。 这 样 当 使 用 Ionic CLI 创建 项 目 
时 ， 将 会 自动 调用 Git 的 命令 ， 从 Github 把 最 新 的 Ionic 模板 与 支持 文件 下 拉 到 本 地 目录 。 

1 . Windows 操作 系统 环境 下 Git 的 安装 

笔者 推荐 使 用 Windows 操作 系统 环境 的 读者 到 图 2.4 展示 的 Git 开发 组 提供 的 专门 网 站 
https://git-scm.com/download/win 自动 下 载 最 新 版 的 Git 安装 包 并 按 提示 安装 即 可 。 
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四 二 Ee 人 de 四 rgbaal 忆 
图 2.4 Git 的 官网 下 载 网 站 
2 . Apple OS X 操作 系统 环境 下 Git 的 安装 
笔者 推荐 使 用 Apple OS X 操作 系统 环境 的 读者 使 用 Homebrew 来 安装 Git。 首先 读者 可 以 
在 Terminal 窗口 输入 : 











brew 
通过 Terminal 窗口 的 提示 可 知 Homebrew 是 否 已 被 安装 。 如 果 Homebrew 尚未 安装 ， 读 
者 需 到 Homebrew 的 官方 网 站 (http://brew.sh/index_zh-cn.html) 依据 说 明 安装 ， 如 图 2.5 所 示 。 
因为 官网 已 提供 中 文 版 的 完整 说 明和 命令 代码 ， 这 里 不 再 详 述 Homebrew 的 安装 过 程 。 





图 2.5 Homebrew 官网 安装 说 明 


有 2 
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读者 也 可 以 使 用 其 他 方式 在 Apple OS 和 操作 系统 环境 下 安装 Git。 因 为 本 书 第 12 章 的 12.1 
节 也 需要 使 用 Homebrew 来 安装 MongoDB， 所 以 这 里 笔者 仅 推荐 了 使 用 Homebrew 的 安 
装 方式 。 





确认 Homebrew 可 以 正常 工作 后 ， 安 装 Git 就 很 简单 了 。 继 续 在 Terminal 窗口 输入 : 
previnstalgit 
即 可 进入 Git 的 安装 。 安 装 完毕 后 可 输入 : 
gtwversion 
验证 Git 是 否 成 功 安装 以 及 被 安装 的 版 本 ， 如 图 2.6 所 示 。 








2.6 验证 Git 是 否 成 功 安装 以 及 被 安装 的 版 本 


2.1.3 安装 Gulp 和 Bower 


Gulp 是 前 端 开发 过 程 中 一 种 基于 流 的 代码 构建 工具 ， 是 自动 化 项 目的 构建 利器 。 她 不 仅 
能 对 网 站 资源 进行 优化 , 而 且 在 开发 过 程 中 很 多 重复 的 任务 能 够 使 用 正确 的 工具 自动 完成 。 具 
体 来 说 ，Gulp 是 基于 Nodejs 的 自动 任务 运行 器 ， 它 能 自动 化 地 完成 JavaScript、SASS/SCSS、 
HTML、CSS 等 文件 的 测试 、 检 查 、 合 并 、 压 缩 、 格 式 化 、 浏 览 器 自动 刷新 、 部 署 文件 生成 ， 
并 监听 文件 在 改动 后 重复 指定 的 这 些 步骤 。 在 实现 上 ， 它 借鉴 了 Unix 操作 系统 的 管道 (pipe) 
思想 ， 前 一 级 的 输出 ， 直 接 变 成 后 一 级 的 输入 ， 使 得 在 操作 上 非常 简单 。 

Bower 是 用 于 Web 前 端 开发 的 Nodejs 包 依 赖 管理 器 。 对 于 前 端 包 管理 方面 的 问题 , 它 提 
供 了 一 套 通用 、 客 观 的 解决 方案 。 它 通过 一 个 API 暴露 包 之 间 的 依赖 模型 ， 这 样 更 利于 使 用 
更 合适 的 构建 工具 。 Bower 没有 系统 级 的 依赖 , 在 不 同 包 之 间 也 不 互相 依赖 , 依赖 树 是 扁平 的 。 

Ionic 框架 同时 使 用 了 Gulp 和 Bower 作为 安装 与 构建 工具 链 的 一 部 分 , 因此 这 两 个 工具 都 
需要 在 命令 行 工具 中 使 用 NPM 安装 好 : 


| 命令 行 里 使 用 了 sudo 来 运行 安装 命令 ， 否 则 可 能 会 出 现 当前 登录 的 用 户 权限 不 够 ， 无 法 
将 文件 复制 到 指定 目录 的 错误 提示 。 











安装 过 程 完成 后 分 别 输入 以 下 两 条 命令 验证 Gulp 和 Bower 的 正常 安装 与 版 本 ， 如 图 2.7 
所 示 。 
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图 2.7 验证 Gulp 和 Bower 是 否 成 功 安 装 以 及 被 安装 的 版 本 





量 元 一 般 的 前 端 项 目 需 要 在 项 目 目录 里 再 次 使 用 NPM 以 项 目 模式 安装 Gulp， 而 因为 Ionic 的 
项 目 模板 已 在 其 packagejson 里 描述 了 对 Gulp 模块 的 依赖 ， 因 此 后 面 的 构建 计 程 不 需要 
进行 类 似 的 安装 了 。 








2.1.4 安装 lonic CLI 与 Cordova 
完成 了 前 面 的 铺垫 之 后 ， 现 在 可 以 开始 安装 Cordova 和 Ionic CLI 了 。 首 先 需要 在 命令 行 
工具 中 使 用 NPM 安装 这 两 个 工具 包 : 


sudo npm install cordova@6.2.0 ionice1.7.16 -9 


总 这 里 安装 Cordova 和 Ionic CLI 时 指定 了 安装 的 特定 版 本 号 ， 这 是 因为 笔者 编写 此 书 时 所 | 
使 用 的 开发 环境 就 是 这 两 个 当前 最 新 的 版 本 。 为 了 保证 后 面 的 讲解 使 读者 能 够 在 自己 的 开 

发 环境 中 完全 重复 ， 笔 者 建议 读者 朋友 在 学 习 时 除非 很 有 把 握 ， 否 则 最 好 不 要 随意 升级 改 
变 它 们 的 版 本 。 


由 于 中 国 互 联网 的 特殊 状况 ， 使 用 NPM 安装 Cordova 和 Ionic CLI 的 过 程 中 可 能 会 出 现 
- 些 依赖 包 无 法 下 载 而 安装 失败 的 现象 。 不 幸 中 招 的 读者 可 以 使 用 cnpm 替换 命令 中 的 npm， 
尝试 使 用 本 章 2.1.1 节 介绍 的 淘宝 提供 的 NPM 软件 包 库 的 镜像 绕 过 此 类 问题 。 





长 
安装 过 程 完 成 后 分 别 输入 以 下 两 条 命令 验证 Gulp 和 Bower 的 正常 安装 与 版 本 ， 如 图 2.8 
所 示 。 








cordova --Version 


ionic --version 








图 2.8 验证 cordova 和 Ionic CLI 是 否 成 功 安装 以 及 被 安装 的 版 本 


进行 到 这 里 ， 可 以 感觉 一 下 Ionic CLI 都 能 提供 什么 高 大 上 的 开发 支持 框架 了 。 直 接 在 命 
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第 2 章 lonic 的 开发 调试 环境 安装 


令 行 工具 中 运行 ionic 命令 即 会 出 现 Ionic 的 任务 提示 界面 : 


ionic 


2.9 中 显示 了 Ionic CLI 支持 的 子 命令 集 和 对 应 的 说 明 。 








| 图 2.9 的 示例 图 截取 的 是 Apple OS 义 操作 系统 中 的 命令 行 提示 ， 在 Windows 操作 系统 中 
[ 的 提示 结果 内 容 应 该 类 似 。 








{use 一 netp or -n for mere 1n10) 
eu Ionic project in the specified PATH 


he /resources directory, naned spUash or con 
,ai, and .psd. 


be rounded 
SPLashscreens should be S2002264 pr, with he Loge contered in the sicdle 


~. Upload an app to your 1oric accowr 
2 the cient Coorher, frieng, or customer 
Gets ary version or updates the Ionic Librory 
-project with s bid tool (eee) 
pp th the hrmle do Patform sorvicee (elt) 
or atfomm 


nd CEN credentials 
et Bia yo ep to Ce 

Set coe 人 guration variayles for 

attore 





图 2.9 Ionic 的 任务 提示 界面 


2.1.5 安装 设置 Chrome 浏览 器 (推荐 ) 


在 运行 Ionic CLI 创建 一 个 项 目 之 前 ， 笔 者 推荐 先 安装 好 Google Chrome 浏览 器 ， 并 将 其 
设 为 系统 的 默认 浏览 器 。 该 浏览 器 的 内 置 开发 者 工具 非常 强大 , 而 且 在 调试 实体 Android 设备 
的 Webview 应 用 时 可 以 连接 其 控制 台 (console) ， 获 取 实时 的 调试 信息 。 建 议 读者 到 其 中 文 
版 官方 网 站 下 载 ， 如 图 210 所 示 ， 安 装 地 址 为 
https://www.google.com/intl/zh-CN/chrome/browser/。 如 果 因 网 络 问 题 无 法 连接 官方 网 站 ， 再 考 
虑 到 国内 的 软件 下 载 网 站 去 找 ， 这 里 笔者 就 不 一 一 指出 了 。 
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图 2.10 Google Chrome 浏览 器 官方 网 站 下 载 


完成 Google Chrome 浏览 器 安装 后 ，Windows 和 Apple OS X 操作 系统 的 用 户 分 别 按 F12 
键 /command+option+I 键 ， 打 开 Chrome 的 开发 者 工具 ， 将 各 窗口 布局 调整 成 如 图 2.11 中 所 示 
的 模式 。 这 种 布局 模式 的 好 处 是 左边 显示 了 APP 应 用 的 模拟 显示 界面 。 当 开发 人 员 在 右 方 窗 
口 对 HTML/CSS/JavaScript 代码 做 出 任何 调整 的 时 候 , 左边 的 页 面 泻 染 将 会 即时 反映 出 代码 的 
效果 ; 而 当 开 发 人 员 操作 左 方 的 界面 元 素 产生 动画 等 效果 时 , 也 可 以 实时 看 到 右 方 代码 窗口 里 
的 CSS 类 被 动态 改变 。 这 种 布局 模式 能 充分 利用 宽屏 显示 器 的 优势 ， 推 荐 读者 采纳 。 








图 2.11 建议 的 Chrome 调试 模式 各 窗口 布局 


对 调整 不 太 熟 悉 的 读者 可 以 参考 点 击 图 2.12 中 注释 出 来 的 按钮 ， 这 样 就 能 比较 容易 获得 
图 2.11 的 效果 。 
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Dock side 


Hide cons 


Search all 


Settings 











图 2.12 Chrome 调试 模式 布局 调整 按钮 


2.1.6 Hello lonic 项 目 
现在 终于 可 以 创建 一 个 Ionic 的 测试 样 例 项 目 来 感觉 一 下 了 。 在 命令 行 输入 : 
ionic start -a "Hello Ionic" -I app.hello ionic.one Hello Ionic blank 
Ionic 的 CLI 会 开始 使 用 Git 从 Github 网 站 上 抓 取 正 式 版 的 Ionic 框架 源 代 码 ， 经 过 
时 间 的 等 待 〈 等 待 时 间 跟 网 络 环境 有 关 ) ， 会 显示 如 图 2.13 所 示 的 完成 界面 。 界 面 里 提示 了 
发 者 已 经 可 以 使 用 ionic serve 在 浏览 器 中 测试 或 是 继续 安装 对 10S 和 Android 移动 操作 系统 
台 的 支持 《后 面 两 个 选项 我 们 会 在 本 章 的 后 续 内 容 里 逐一 介绍 ) 。 
画 款 行 本 国王 二 | 








Your Ionic app is ready to got 


Make sure to cd inte your new app directory: 


r app in the brows 


Nev? nad push notifications, live app updates, and more with Ionic Platfornt 














图 2.13 Ionic CLI 完成 初始 化 项 目 框架 提示 界面 
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ionic 移 天 











葬 元 | 随后 onic 会 试图 调 用 NPM 炙 续 安装 所 需 的 Nodejs 组 件 ， 由 于 国内 网 络 状况 会 有 可 能 失 
[ 败 。 这 个 问题 可 以 通过 在 项 目的 根 目 录 下 运行 命令 "cnpm install" 来 解决 。 





按照 图 2.13 的 提示 ， 进 入 项 目 目录 后 在 命令 行 窗口 中 输入 : 


ionic serve 








Ionic CLI 将 开始 Web 构建 过 程 ， 进 入 命令 状态 ， 并 启动 默认 的 浏览 器 打开 APP 应 
图 2.14 所 示 。 


， 如 











图 2.14 Ionic CLI 命令 状态 


2.1.7 ”使 用 浏览 器 验证 开发 环境 自动 重 载 特性 


Ionic 框架 为 浏览 器 环境 开启 变更 自动 重 载 。 开 发 者 更 改 了 项 目 代码 并 保存 后 ， 浏 览 器 会 
自动 刷新 反映 变化 。 图 2.15 是 初始 页 面 的 内 容 ， 注 意 顶 栏 标题 为 “Ionic Blank Starter” 





lonic Blank Starter 





图 2.15 页 面 初始 显示 





随后 读者 可 以 尝试 使 用 文本 编辑 器 打开 项 目 目录 中 www 字母 下 的 index.html 文件 ， 找 到 
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“Ionic Blank Starter” 文 本 字样 后 将 其 改 为 “Hello Ionic” 并 保存 文件 。 无 须 手 动 刷新 ， 浏 览 











器 就 会 自动 刷新 页 面 ， 如 图 2.16 所 示 ， 注 意 顶 栏 标题 已 变 为 “Hello Ionic”。 















































图 2.16 页 面 自动 reload 后 项 栏 标 题 显示 的 文本 更 新 


Windows 下 安装 Android 开发 平台 


完成 本 书 2.1 节 的 安装 后 ,我 们 已 经 可 以 在 浏览 器 中 运行 Ionic 框架 开发 出 的 APP 应 月 


Ke 


然而 在 使 用 任何 移动 平台 硬件 设备 的 特性 之 前 ,还 需要 安装 对 应 移动 平台 操作 系统 的 软件 开发 
包 (SDK) 。 这 些 软件 开发 包 是 由 移动 平台 操作 系统 的 供应 商 提 供 且 不 断 升 级 维护 的 。 本 节 
将 介绍 在 Windows 下 安装 Google 公司 的 Android 软件 开发 包 并 使 用 Android 实体 机 设备 测试 。 








及 元 | iOS 的 软件 开发 包 只 能 安装 运行 在 Apple OSX 操作 系统 环境 ， 因 此 使 用 Windows 操 f 
统 的 读者 只 能 安装 和 使 用 Android 开发 平台 。 有 些 开 发 人 员 使 用 “ 黑 苹果 ”的 方式 在 
上 安装 Apple OSX 操作 系统 ， 因 为 法 律 风险 笔者 在 本 书 不 便 介 绍 这 种 做 法 。 


PC 





按照 官方 网 站 说 明 , Ionic 只 对 Android 和 1OS 提供 全 面 的 技术 支持 ，Windows Phone 不 在 


考虑 范围 之 内 ， 因 此 本 书 也 不 会 介绍 Windows Phone 的 开发 平台 安装 。 








2.2.1 安装 Android 开发 环境 
1 . 安装 JDK 
Android 平台 中 APP 应 用 的 主要 开发 语言 是 Java， 因 此 首先 需要 安装 和 配置 JDK ( 




















Java 


Development Kit) 。 读 者 可 以 自行 到 Oracle 公司 提供 的 官方 最 新 Java SE 版 的 JDK 网 址 


http://www.oracle.com/technetwork/Java/javase/downloads/index.html 下 载 ， 如 图 2.17 所 示 。 
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Server JRE 
» Certted Sysem Contgurasons 
» Readme Files 
» JOKReadMe Ei 


» JREReacMe 








图 2.17 选择 Java SE 版 的 JDK 下 载 


安装 时 需要 记 下 JDK 在 本 机 安装 的 路 径 , 因为 随后 需要 设置 系统 环境 变量 指向 这 个 路 径 。 
以 笔者 的 PC 为 例 ，JDK 的 安装 路 径 为 C:\Program Files\Java\jdk1.8.0_60。 然 后 点 击 Windows 
开始 菜单 按钮 ， 在 “搜索 文件 和 程序 ”的 搜索 栏 中 输入 “Environment Variables”， 在 开始 菜 
单 里 筛选 出 现 的 操作 项 中 点 击 “ 编 辑 系统 环境 变量 ”， 如 图 2.18 所 示 。 

在 随后 出 现 的 如 图 2.19 的 对 话 框 中 ， 切 换 到 “高 级 ”选项 卡 ， 再 点 击 “环境 变量 按钮 ”。 
BZ i L 














要 进行 大 多 数 更 改 ， 您 必须 作为 管理 员 登 录 。 
性 能 
视觉 效果 ， 处 理 器 计划 ， 内 存 使 用 ， 以 及 座 拟 内 存 



































控制 面板 (1) | 
中 闫 名 系统 环境 蛮 量 
图 2.18 查找 编辑 系统 环境 变量 入 口 2.19 进入 编辑 环境 变量 


在 随后 出 现 的 如 图 2.20 显示 的 “环境 变量 ”对 话 框 中 ， 查 找 下 方 是 否 已 经 设置 了 
“JAVA_HOME ”变量 并 确定 变量 值 与 安装 时 获得 的 JDK 的 安装 路 径 相 同 。 如 果 查 不 到 
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“JAVA_HOME ”变量 ， 则 需要 点 击 “ 新 建 ”按钮 ， 在 变量 名 和 变量 值 输入 栏 分 别 输入 
JAVA _ HOME 和 JDK 的 安装 路 径 ， 参 见 图 2.21。 


环境 大 区 本 


kinge 的 用 户 变量 如 








变量 什 

Path C:\Program Files (x86)\Microso. 
PTEHONE C:\Progran Files (x86)\Cisco Pa 

TENP WUSERPROFILEX\AppData\Locsl\Tenp 

THP MISRRPRNPTI EXMAnnNata\l.acal Tomn 


ET 


























系统 变量 G@) 
国医: 什 
HerokuPath C:\Program Files Sina 
条 CiVregem Tiles 0_60\ 久生 系统 变量 - 于 -一 
NODE_PATH c Users\Thinkped\AppDate\Rouni PF 
MMARR NF _PR 4 
变量 名 名 JAYA_HDNE 
Ev 而 加 
变量 值 四 Upr om wm Files\eve drl 6 0 650 
[CC 三 驯 [能 [| 台 
图 2.20 查找 系统 变量 “JAVA_HOME” 图 2.21 设置 系统 变量 “JAVA_HOME” 


以 上 步 又 都 成 功 完成 后 ， 读 者 可 以 在 命令 行 窗口 中 输入 验证 命令 ; 


Java -Version 


如 果 出 现 类 似 图 2.22 的 输出 结果 , 则 表明 JDK 已 安装 完毕 , 可 以 进入 下 面 的 安装 Android 
Studio 阶段 。 





夯 令 信 提示 符 rex) 


t Cbuild 1.8.9 


M Cbuild 25 











图 2.22 验证 JDK 安装 命令 输出 结果 
2 . 安装 Android Studio 


笔者 推荐 到 Android 开发 者 网 https://developer.android.com/studio/index.html#downloads 下 
载 对 应 操作 系统 平台 Android Studio， 参 见 图 2.23， 如 果 因 网 络 问题 无 法 连接 官方 网 站 ， 可 考 
虑 到 国内 的 软件 下 载 网 站 去 找 。 
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Start using Android Studio today 
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| DOWNLOAD ANDROID STUDIO 2.1 VE 2 
| RELEASE DATE JUNE 6,2016 


| Selecta different platform 
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No Androld SOK, no installer (076085009 bytes) 
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(305671838 bytes) 
Lnux andreld-studlo-de-143 29158274inu zh 291 MB d34c75ae2calcfa729216b5301143603082c6td0 
(805181285 byteal 
























































图 2.23 选择 对 应 操作 系统 平台 Android Studio 下 载 


下 载 完毕 运行 安装 文件 , 使 用 默认 推荐 模式 安装 即 可 。 不 过 在 安装 过 程 中 需要 记 住 Android 
SDK Tools 安装 到 本 地 PC 的 路 径 。 以 笔者 的 PC 为 例 是 Ci\Users\Thinkpad\AppData\Local\Android\ 
sdk\。 











Android 平台 下 的 安装 程序 打包 编译 都 需要 这 个 Android SDK Tools。 如 果 读 者 确定 将 来 不 


一 之 所 以 需要 安装 Android Studio， 是 因为 安装 它 的 时 候 会 同时 安装 Android SDK Tools。 
会 进行 Cordova 组 件 的 开发 ， 也 可 以 到 官网 自行 下 载 Android SDK Tools 安装 即 可 。 








安装 之 后 需要 做 类 似 安装 JDK 之 后 的 系统 环境 变量 设置 工作 。 这 次 需要 设置 2 个 变量 : 


@ ANDROID HOME: 以 笔者 的 PC 为 例 ， 需 要 增加 系统 环境 变量 ANDROID HOME， 
并 设置 为 C:\Users\Thinkpad\AppData\Local\Android\sdk\。 
@ PATH: 以 笔者 的 PC 为 例 ， 需 要 增加 或 修改 系统 环境 变量 PATH， 并 分 别 加 入 两 个 
路 径 : 
> Ci:\Users\Thinkpad\AppData\Local\Android\sdk\platform-tools。 
> C:\Users\Thinkpad\AppData\Local\Android\sdk\tools。 


3 . 安装 与 更 新 Android SDK 包 


Android Studio 安装 和 路 径 配 置 完毕 后 , 需要 使 用 Android SDK Tools 所 带 的 SDK Manager 
更 新 下 载 Cordova 能 够 支持 特定 Level 的 Android API。 有 具体 的 做 法 是 在 命令 行 窗口 中 输入 ; 
android 
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随后 在 图 2.24 所 示 的 Android SDK Manager 对 话 框 中 ， 推 荐 至 少 选 取 以 下 选项 后 (推荐 
读者 安装 图 2.24 中 列 出 的 所 有 Package 以 保证 后 面 能 够 顺利 构建 ) 点 击 “Install packages”: 


®@ Tools 一 Android SDK Build-tools 23.0.x (可 选 主 版 本 23 号 为 23 的 最 高 版 安装 ) 
® Android 6.0 (API23 ) 一 SDK Platform 
@@ Extras 一 Android Support Library 23.x.x (可 选 主 版 本 23 号 为 23 的 最 高 版 安装 ) 
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图 2.24 Android SDK Manager 选取 安装 的 Packages 


如 果 因 为 国内 的 网 络 状况 导致 安装 过 程 无 法 完成 ， 建 议 读者 可 以 尝试 在 Android SDK 
Manager 的 菜单 中 选取 Tools 一 Options..… 在 弹出 的 对 话 框 中 选中 如 图 2.25 所 示 的 选择 框 再 次 
尝试 。 
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图 2.25 设置 Android SDK Manager 使 用 HTTP 协议 


安装 ， 则 读者 需要 通过 一 定 的 技术 手段 (如 购买 临时 VPN 账户 ) 连接 到 外 





如 果 还 是 无 法 


网 来 完成 安装 了 。 


2.2.2 为 测试 项 目 增加 Android 平台 支持 

现在 可 以 回 到 Ionic CLI 为 2.1.6 节 创建 的 测试 项 目 配置 Android 平台 支持 了 。 按照 图 2.26 
所 示 ， 进 入 项 目 目录 后 在 命令 行 窗口 中 输入 : 

ionic Platform add android 


原 并 配置 完 所 有 的 内 容 。 





Dounloading: https://githe 
[ 1 i199 A.As 














图 2.26 为 测试 项 目 增加 Android 二 


2.2.3 连接 Android 实体 机 设备 测试 APP 
Ionic 的 测试 项 目 增加 完 对 Android 平台 的 支持 后 , 就 可 
行 测试 了 。 按 照 图 2.27 所 示 ， 进 入 项 目 目录 后 在 命令 行 窗 


[以 直接 连接 Android 实体 机 设备 进 
口中 输入 : 
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ionic run android --device 


Ionic CLI 自动 完成 项 目的 编译 、 链 接 和 生成 打包 apk 工作 。 生成 的 Android 安装 包 文 件 存 
放 路 径 为 : 项 目 目 录 /platforms/android/build/outputs/apk/android-debug.apk。 








LITTLE 








图 2.27 连接 Android 实体 机 设备 运行 测试 命令 


命令 

此 时 如 果 开 发 人 员 将 符合 版 本 要 求 且 在 设备 的 设置 中 打开 了 开发 人 员 调 试 选项 的 实体 
Android 设备 通过 USB 接口 连接 到 PC 机 ， 则 Ionic 就 能 找到 该 设备 ， 尝 试 将 测试 安装 包 安 装 
在 设备 上 并 启动 运行 。 图 2.28 分 别 演示 了 Android 系统 提示 安装 应 用 、 应 用 启动 后 的 界面 显 
示 和 应 用 图 标 在 桌面 上 的 显示 截屏 。 至 此 Windows 操作 系统 环境 下 Ionic 的 Android 平台 支持 
就 可 以 确认 为 成 功 安装 了 。 
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Hello lonic 





取消 安村 




















图 2.28 连接 Android 实体 机 设备 安装 测试 APP 示例 


2.2.4 不 使 用 Android 模拟 器 的 说 明 


- 些 早期 关于 移动 APP 开发 的 书籍 会 介绍 如 何 增加 配置 Android 模拟 器 。 由 于 Android 
本 身 的 模拟 器 启动 和 执行 缓慢 ， 再 加 上 市 场 的 竞争 导致 高 性 能 的 Android 设备 价格 低廉 ,因此 
本 书 不 介绍 如 何 使 用 Android 模拟 器 进行 Ionic APP 应 用 项 目的 开发 测试 ， 有 特殊 需要 的 读者 
可 自行 查找 网 上 的 资料 来 配置 实现 。 


Apple OS X 下 安装 ios 与 Android 
开发 平台 


使 用 Apple OS X (以 下 简称 为 OSX) 的 一 个 相对 优势 就 是 如 果 配 置 得 当 ， 可 以 在 一 台 开 
发 机 上 同时 为 iOS 与 Android 这 两 种 移动 平台 编译 、 部 署 和 测试 APP 应 用 。 因 此 建议 有 条 件 
的 读者 考虑 使 用 MacBook Air 或 Mac mini 来 做 开发 机 。 本 节 将 介绍 在 Apple OS X 下 安装 开发 
iOS 的 软件 包 Xcode 和 Android 开发 工具 Android Studio， 并 分 别 使 用 iOS 模拟 器 和 Android 
实体 机 设备 完成 示例 应 用 的 发 布 测试 。 


?十 


















































富 寺 | 由 于 国内 的 网 络 状况 ,如 果 即 使 遵照 作者 在 本 节 给 出 的 完整 步骤 也 无 法 成 功 安装 ,往往 是 


因为 某 些 站 点 被 屏蔽 的 关系 。 建 议 读者 通过 一 定 的 技术 手段 (如 购买 临时 VPN 账户 ) 连 
| 接 到 外 网 来 完成 安装 
2 
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=PE3 


2.3.1 安 逆 Xcode 


安装 Xcode 是 开发 运行 在 iOS 上 的 APP 应 用 的 前 提 。Xcode 的 安装 步骤 比较 简单 ， 进 入 
OSX 桌面 后 ， 点 击 桌面 工具 栏 的 "Lauchpad" 图 标 。 随 后 在 弹出 的 列表 窗口 中 选择 “App Store” 
进入 苹果 的 应 用 商店 ， 再 在 应 用 商店 的 搜索 栏 中 输入 “xcode”， 最 左边 将 会 出 现 Xcode 的 应 
用 安装 图 标 ， 如 图 2.29 中 点 击 安装 (GET) 按钮 即 可 进入 正常 的 安装 过 程 。 




















< 


Search Results for "xcoder 
App Icon cei as Dors for Xeoce IDAssetManager LiteforX 
Develope Developer Too! Developer Toots 
庙 页 雇 交 让 15R 
CHD cD 
In-App Purchasas 





The x Helper - The nelp { {i anager Pro for X. 


图 2.29 使 用 苹果 的 应 用 商店 安装 Xcode 


2.3.2 ”为 测试 项 目 增加 iOS 平台 支持 


Xcode 安装 完毕 后 ， 即 可 马上 验证 一 下 在 2.1.6 节 创建 的 测试 项 目 是 否 能 构建 出 iOS 平台 
的 应 用 了 。 进 入 2.1.6 节 创 建 的 测试 项 目 根 目录 后 在 命令 行 窗口 中 输入 : 


ionic platform add ios 

Ionic CLI 会 自动 下 载 所 需 资源 并 配置 完 所 有 的 内 容 。 命 令 行 窗 口 显示 输出 的 结果 与 图 2.26 
显示 的 内 容 基本 相似 ， 除 了 里 面 android 的 字样 改 为 ios 以 外 。 笔 者 这 里 就 不 重复 贴图 了 。 
2.3.3 ”连接 iOS 模拟 器 测试 APP 


为 测试 项 目 增加 iOS 平台 支持 成 功 完成 后 ， 即 可 继续 使 用 Ionic CLI 调用 Xcode 完成 项 目 
的 编译 、 链 接 、 生 成 、 部 署 到 iOS 模拟 器 中 并 启动 。 需 要 在 测试 项 目 根 目录 中 输入 的 命令 是 : 


ionic run ios 


经 过 一 定时 间 的 构建 ， 最 终 将 出 现 如 图 2.30 所 示 的 iPhone 6 模拟 器 运行 界面 。 





e6- e € ] 2 
Carrier 全 10:12 PM mw 


lonic Blank Slarler 





2.30 ”iOS 设备 模拟 器 运行 测试 项 目 APP 
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构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


使 用 iOS 设备 模拟 器 来 测试 的 一 个 好 处 就 是 能 够 比较 方便 地 动态 切换 各 种 型 号 的 设备 查 
看 界面 布局 ， 如 图 2.31 所 示 。 























Touch ID Enrolled 


Simulate Finger Touch 


Simulate Memory Warning 
Toggle In-Call Status Bar 
Keyboard 


External Displays 





图 2.31 iOS 设备 模拟 器 切换 不 同型 号 的 测试 设备 


2.3.4 低 成 本 连接 iOS 实体 机 设备 测试 APP 

iOS 模拟 器 只 能 满足 部 分 开发 基于 iOS 的 APP 应 用 时 的 需要 ， 上 毕竟 未 来 APP 是 要 运行 在 
实体 机 上 , 而 且 有 些 设 备 专 有 的 硬件 功能 也 需要 实体 机 调试 才能 确保 万 无 一 失 。 出 于 真 机 调试 
的 必要 性 ， 笔 者 决定 介绍 在 考虑 广大 读者 经 济 负担 情况 下 的 iOS 实体 机 调试 安装 步骤 。 











如 果 不 介 意 花费 一 定 的 金钱 并 且 愿 意 每 年 支付 维持 会 员 费 而 成 为 Apple 的 专业 开发 者 的 
读者 可 以 直接 考虑 参考 苹果 的 官方 网 站 说 明 来 建立 个 人 专属 的 账户 
https:/developer.apple.comy/programs/enroll/。 因为 申请 账户 的 步骤 相当 烦琐 且 苹果 已 经 有 过 
调整 相关 过 程 的 历史 ， 笔 者 就 不 在 本 书 具 体 说 明了 。 








1 . 获取 实体 机 设备 的 UDID 

iOS 实体 机 设备 启动 系统 自 带 的 浏览 器 Safari 打开 网 址 http://pre.im/udid， 根 据 弹 出 的 
提示 安装 描述 文件 即 会 返回 该 页 面 ， 最 后 会 出 现 40 位 的 UDID (设备 唯一 标识 符 ) ， 如 图 
2.32 所 示 。 
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图 2.32 获得 iOS 设备 UDID 
2 . 获得 .p12 文件 和 .mobileprovision 文件 并 导入 
随后 根据 获取 到 的 实体 机 设备 的 UDID: 
@ ”如 果 读者 有 认识 的 已 经 拥有 Apple 开发 个 人 账户 的 亲友 ， 可 以 请 求 他 们 帮忙 根据 
UDID 生成 后 级 名 为 .p12 的 证 书 文件 和 后 级 名 为 .mobileprovision 的 文件 。 
@@ 否则 可 以 到 淘宝 上 购买 生成 .p12 文件 和 .mobileprovision 文件 的 服务 ， 费 用 也 非常 低 
廉 。 
获得 .p12 文件 和 .mobileprovision 文件 后 ， 在 OSX 开发 机 上 依 序 双击 这 两 个 文件 ， 接 受 系 
统 的 默认 导入 方式 提示 ， 即 完成 了 指定 iOS 实体 机 设备 的 测试 登记 。 
3 . 测试 连接 iOS 实体 机 设备 
现在 可 以 使 用 USB 连接 线 将 iOS 实体 机 设备 连接 到 OSX 开发 机 上 ， 并 对 所 有 的 弹出 警 
告 框 全 部 接受 。 随 后 在 命令 行 窗口 进入 OSX 开发 机 上 的 项 目 目录 ， 输 入 : 


run ios - ice 





Ionic CLI 将 调用 Xcode 自动 完成 项 目的 编译 、 链 接 和 部 署 到 用 于 测试 的 iOS 实体 机 设备 
并 启动 调试 模式 。 图 2.33 显示 的 OSX 开发 机 上 控制 台 输 出 的 最 后 一 行 提示 了 项 目的 主页 面 文 
件 已 被 加 载 ， 这 就 表明 用 于 测试 的 APP 应 用 已 经 被 成 功 安装 并 启动 了 。 

读者 按照 步骤 运行 到 这 里 时 ， 用 于 测试 的 APP 应 用 也 应 该 安装 在 iOS 实体 机 设备 里 并 显 
示 主 页 面 窗口 了 。 
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构建 移动 网 站 与 APP: 





四 中] 
Executing comands in "7tmp/C21B2C97-A770-4D27-98D1-BF4E3EAE4AX9/fruitstrap-Ltdb-prep-cnds-9215a42d4c4546 二 | 
fa486175b13adcc7581b44b673， 
(Udb) platform select renote-ios 一 sysroot '/Users/qinchao/Library/Developer/Xcode/i0S DeviceSupport 
/9.3.2 (13F69)/Synbots' 

Platform: renote-ios 

Connected: no 

SDK Path: "/Users/qinchao/Library/Developer/Xcode/i0S DeviceSupport/9.3.2 (13F69)/Synbols" 


(Udb) target create "/Users/qinchao/temp/ionic/examplel/platforns/ios/build/device/HelloCordova.app" 
Current executable set to '/Users/qinchao/tenp/ionic/exanplel/platforms/ios/build/device/HelloCordova.app 
"(amv7),. 

(Udb) script fruitstrap_device_app="/private/var/containers/Bundle/Application/E8A37678-1C5C—4EE1-B1 


FF-C5FE48D48472/HelloCordova. app" 

(lldb) ~ script fruitstrap_connect_url="comect://127.0.8.1:54126" 

(Udb) comand script import "/tRp/C2192C97-A77D-D27-98D1-BF<E3EAE<A49/fruitstrap_9215ad2dac45461a48 
0175bl3adec7581b44b873. py" 

(Ludb) comand script add -f fruitstrap_9215a42d4c4546fa489175b13adec7581b44b673.connect_command conn 


(Udb) command script add -s asynchronous -1 fruitstrap_9215n42d4c4546fa489175b13adec7581b4b873. run_ 
command run 

(Udb) comand script add -s asynchronous -1 frultstrap_9215a42d4c45461a489175b13adec7581b440973.auto 
exit_comand autoexit 

(Udb) 。 command script add -s asynchronous -f fruitstrap_9215e42d4c4546fa400175b13adec7581b440073. safe 
quit_comand safequit 


(Udb) connect 
(Udb) run 
Success 


2816-97-11 01:06:38.801 HelloCordova[38447:2653714] Disktookiestorage changing policy fron 2 to 9, cookie 
file: file:///private/var/mobile/Containers/Data/Application/6F980255-022E-4AE4-8558-3285EF6DeD42/Librar 
Y/Cookies/Cookies,binarycookies 

2616-97-11 91:96:39.976 HelloCordova[30447:2653714] Apache Cordova native platform version 3.8.6 is start 
ing。 
2816-87-11 91: 
2616-97-11 0: 
2016-07-11 @: 
2016-07-11 @: 


79 He ttoCordova[38447:2653714] Multi-tasking -> Device: YES, App: YES 

17 HelloCordova[30447:2653714] Unlinited access to network resources 

45 HelloCordova [30447:2653714] Resetting plugins due to page lood, 

91 HelloCordova [30447: 2653714] Finished load of; tile:///var/containers/Bund le/AppUi 








6 
cation/E8A37678-1C5C-4EE1-81FF-C5FE4BD48472/HelloCordova.app/ww/index.htnl 








图 2.33 ”应 用 部 团 到 iOS 实体 机 设备 并 已 启动 的 输出 提示 


2.3.5 安装 Android 开发 环境 

1. 安装 /更 新 JDK 

类 似 于 2.2.1 节 介 绍 的 步 又， 建议 在 OSX 中 安装 最 新 的 JDK， 同 样 是 到 
http://www.oracle.com/technetwork/Java/javase/downloads/index.html 选择 对 应 操作 系统 的 JDK 
版 本 下 载 后 直接 安装 。 

安装 结束 后 ， 也 需要 配置 JAVA_HOME 环境 变量 。 为 方便 起 见 ， 下 面 以 笔者 的 OSX 下 
JDK 安装 路 径 是 /Library/Java/JavaVirtualMachines/jdk1.8.0_66/Contents/Home 为 例 。 在 命令 行 
窗口 中 ， 执 行 以 下 命令 即 可 : 

export 
JAVA HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0 66/Contents/Home 

2. 安装 Android Studio 


到 Android 开发 者 网 https://developer.android.com/studio/index.html#downloads 下 载 对 应 操 
作 系 统 平台 Android Studio， 请 参考 2.2.1 节 里 的 图 2.23。 如 果 因 网 络 问题 无 法 连接 官方 网 站 ， 
可 考虑 到 国内 的 软件 下 载 网 站 去 找 。 

下 载 完毕 后 ， 双 击 被 下 载 到 本 地 的 .dmg 文件 ， 会 出 现 如 图 2.34 所 示 的 安装 提示 窗口 。 
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Mndleid 
Suge 







图 2.34 Android Studio 安装 提示 窗口 


拖 动 图 中 左边 Android Studio 图 标 到 右边 的 Applications 目录 里 就 完成 初步 安装 了 。 
随后 需要 双击 右边 的 Applications 目录 夹 ， 打 开 如 图 2.35 所 示 的 Applications 目录 ， 再 双 
击 左 侧 的 Android Studio 图 标 启动 它 。 


DS_Store 
locallzed 

® Androld Studio 

久 App Store 

Gr Anomator 

则 Calculator 

国 calendar 

寺 Cness 

二 Contacts 

@ Dashboard 

Donary 人 

DVD Player 

民 FaceTime 

看 Font Book 

号 ek pode, Android Studio 

启 GarageBand 

@ Coogle chome 

© iBooks 

尹 Image Capiure Lom 

高 iMovie 


@ runes pdd Tags- 
时 keynote 






pplicaton - 531.2 MB 
d Friday, Vay 27, 2016 at 11:44 AM 
d Friday, Nay 27, 2016 at 11:44 AM 
d Friday Nay 27. 2016 at 11:44 AM 











图 2.35 启动 Android Studio 


随即 Android Studio 会 开始 执行 初始 化 Setup。 此 处 需要 记 下 对 话 框 中 显示 的 SDK Folder 
路 径 ， 以 图 2.36 为 例 是 /Users/qinchao/Library/Android/sdk， 然 后 在 Verify Settings 对 话 框 中 点 
击 Finish 即 可 。 
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pk Verify Settings 


Ifyou want to review or change any of your installation settings, click Previous. 


Current Settings, 





Setup Type: 
Standard 


SDK Folder: 

/Users/qinchao/ Library/Android/sdk 
Toral Download Size: 

602 ME 

SDK Components to Download: 
Andrald SDK Bulld-Tools 24 
Android SDK Platform 24 

Android SDK Platform-Tools 24 
Android SDK Tools 25.1.7 

Android Support Repository 





|_ Google Repository 








图 2.36 启动 Android Studio 执行 初始 化 Setup 
Android Studio 会 开始 连接 下 载 网 站 下 载 Android 开发 包 并 安装 ， 如 图 2.37 所 示 。 


人 以 Downloading Components 


Downloading... 


raroro-u/ renoerseript/ Ctong=1nc Woe/emaantr nn 

android-N/renderscript/clang-include/htxlintrin.h 

android-N/\ib64/\ibbcc.dylib 

android-N/renderscript/clang-inc\lude/bmizintrin.h 

android-M/renderscript/tib/bc/x86/ 

android-M renderscript/tibyintermediates/ 

landroid-N/ renderscript/ Uib/packaged/ 

android-N/renderscript/ 

android-N/renderscript/clang-include/altivec.h 

androld-N/ renderscript/clang-inc\lude/stdint.h 

android-N/renderscript/clang-include/xsavecintrin.h 

android-N/renderscript/clang-include/bmiintrin.h 

androld-MWmlpset-Ulnuxrandro1d-td 

android-N/renderscript/Uib/packaged/armeabi-v73/ libRSSupport. so 

android-N/renderscript/clang-include/varargs.h 

android-N/ renderscript/inc lude/rs_core. rsh 

android-N/renderscript/ Uib/intermediates/x85/ 

android-N/renderscript/include/rs_allocation_data. rsh 

android-N/renderscript/clang-inclide/xtestintrin.h 

Dounloading https://dl.go0gle. com/android/repository/gocg\e_m2repository_r29 
ziphttps://dl.google. com/android/repository/google_m2repository_r29.2ip 





图 2.37 Android Studio 连接 下 载 网 站 下 载 Android 开发 包 并 安装 








如 果 安 装 过 程 中 失败 , 很 大 可 能 性 是 因为 国内 的 网 络 状况 问题 , 则 读者 需要 通过 一 定 的 技 
[ 术 手 段 〈 如 购买 临时 VPN 账户 ) 连接 到 外 网 来 完成 安装 了 。 








安装 结束 后 ， 将 显示 如 图 2.38 所 示 的 Android Studio 欢迎 界面 。 此 时 需要 点 击 下 方 的 
Configure 下 拉 按 钮 ， 选 择 其 中 的 SDK Manager 来 安装 稍 低 版 本 的 SDK 和 工具 。 
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区 


Android Studio 


亲 Start a new Android Studio project 

D Open an existing Android Studio project 

二 Check out project from Version Control ~ 
[¥ Import project (Eclipse ADT, Gradle, etc.) 


Ef Import an Android code sample 


亲 Configure Get Help ~ 
Preferences 
Plugins 
Import Settings 
Export Settings 
Settings Repository, 
Check for Update 
Project Defaults » 





图 2.38 Android Studio 欢迎 界面 


在 随后 出 现 的 窗口 里 的 左边 导航 栏 ， 点 击 选择 Appearance & Behavior 一 System Settings 一 
Android SDK， 然 后 在 右边 的 SDK Platforms 选项 页 内 ， 选 中 Android 6.0 (Marshmallow) 底下 
至 少 Google APIs、Android SDK Platform 23、Sources for Android SDK 这 3 项 , 如 图 2.39 所 示 。 
接着 再 切换 到 SDK Tools 选项 页 ， 选 中 如 图 2.40 所 示 被 选中 的 项 目 ， 点 击 OK 按钮 后 会 显示 
如 图 2.41 的 SDK Quickfix Installation 窗口 ， 等 待 它 执行 下 载 安装 完毕 就 可 以 了 。 











Appaarances penavior , System Serungs , Andrele son 
Manaper for the nod SOK and Toolt wsed by Add Suio 
Mndroid SOK Location Uven JomehaoUibray IAdrocd neh Et 


SDN Pom SOx Tools SDk Upaae Shes 


@ Show raceane Decals 


aneh sandalone SDK Nanacer 





LD 


图 2.39 安装 指定 版 本 SDK Platforms 
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1 Appearance & Behavior Nanager for the hndroia SD« and Tea used by Andrcid studie 
AFptaance Mndrold SD« Locatior: [ Users/ cinera3/ arn /Ardroid, sdk Ea 
Menus and Toolbars 


System sening 


es Below ars me avallable sDy developer tacle. Once 








Android Aete AP S multors 
Anrol4 Attc Deski03 ead umitemulalor 
@ An3mid Snx Ptiomr-Tonks ?4 











ah Varables Admid 5DKToos 25.-.7 
evmap Ad Suppor Yepos ud 

Editor Documentatio forAncn 
plugine CPU Dabagoin 

~ sulle, Execuyon, Deployment Gorle Par APY 





> Tank 


@ camglemeporimn 
Google web Drver 
nts 6 EmalarerAcceleraer etwghincalley 
UDE20 
Ups21 
com androld support cons raintcorsira mlarout-solverL.0.0-alghat 
tom anglol support consvanecons Ira me-la/our LO.0-alpns4 





Show package Detalls 


Saunch standalars SOK Nanager 





图 2.40 安装 指定 版 本 SDK Tools 


Component Installer 


PM hrs sao 


Installing Requested Components 





SDK Path: /Users/qinchao/Library/Androic/sdk 
To netall: 

- Gangle APTS iadd-ons;addon-gong1e_ap's-google-23) 
- Android SDK Platform 23 (platforns;android-73) 

~ Seurces for Andraid SK (soureesiandroid-23) 


nstalling Gongle hpTs 
Nownloading htrps://dl .nogle.com/android/repnsitory/gnngle_ap’ s-73_rA1.7°p 
Tnstalling Gnogle ApTs in 

/lsere/qinchan/t ibrary/Android/sdk/add-ans/addon-gongle_apis-gongle—73 
Tnstallation of Gocgle ApTs complete. 





Tnstalling Android SDK Platform 23 
Nownloading hfrps://dl .google-com/android/reposifory/plaffnrn-73_rn3.7ip 

Tnstalling Android SDK Platform 23 in /sers/qinchao/library/Android/sdx/p1afforms/yandroid-73 
Tnstallation of Android SDK Platform 73 romplete- 


Tnstalling Snurces for Android SDK 
Nownloading hfrps://dl .oogle-com/android/reposifory/sourcps-73_ra1.7ip 
Tnstalling Sources for Android SDK in /licers/qinchan/l ibrary/Android/sdx/sources/andraid-73 


Un. 





pping... 





src/android/supportiv4/view/ViewParentCompatKitKat.java 


© Please walt untll the Installarlon finishes to ccntinue 








图 2.41 SDK Quickfix Installation 窗口 


最 后 需要 做 的 就 是 类 似 2.2.1 节 所 做 的 ， 还 要 设置 ANDROID_HOME 环境 变量 和 路 径 ， 
以 笔者 的 操作 系统 环境 为 例 需要 执行 的 命令 是 : 
export ANDROID HOME=/Users/qinchao/Library/Android/sDK 
export PATH=${PATH}:/Users/qinchao/Library/Android/SsDK/platform-tools:/User 
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2.3.6 为 测试 项 目 增加 Android 平台 支持 

现在 可 以 回 到 Ionic CLI 为 2.1.6 节 创建 的 测试 项 目 配置 Android 平台 支持 了 。 与 图 2.26 
类 似 ， 进 入 项 目 目录 后 在 命令 行 窗 口中 输入 : 
ionic Platform add android 


Ionic CLI 会 自动 下 载 所 需 资源 并 配置 完 所 有 的 内 容 。 


2.3.7 ”连接 Android 实体 机 设备 测试 APP 


上 述 步骤 完成 后 , 就 可 以 用 USB 线 连 接 Android 实体 机 设备 和 OSX 开发 机 测试 一 下 APP 
了 。 如 果 读 者 像 笔者 一 样 用 的 是 国内 的 厂商 提供 的 Android 设备 ，Android SDK Manager 可 能 
会 因为 无 法 识别 而 不 能 连接 。 因 此 出 于 保险 起 见 ， 读 者 可 以 先进 入 OSX 的 
Launchpad 一 Other 一 System Information， 在 弹出 的 窗口 左 侧 导 航 树 中 点 击 USB 项 目 ， 然 后 在 
右边 的 USB Device Tree 视图 里 找到 通过 USB 线 连 接 的 Android 实体 机 设备 的 Vendor ID。 以 
笔者 为 例 ， 华 为 手机 的 Vendor ID 为 0x12d1， 如 图 2.42 所 示 。 


uired (mA 500 
Extra Operating Current (mAj: 0 





2.42 在 System Information 窗口 查找 Android 设备 Vendor ID 
随后 在 命令 行 窗口 中 执行 : 
echo "0xl2dl" > /android/aqb usbin 
最 后 就 是 进入 项 目 目 录 后 在 命令 行 窗口 中 执行 命令 来 使 用 Android 实体 机 设备 测试 APP: 
ionic run android -device 


如 果 前 面 的 步骤 都 顺利 完成 , Ionic CLI 将 能 成 功 找到 Android 实体 机 设备 , 启动 如 图 2.43 
的 构建 过 程 。 








Running command; /Users/qinchac/temp/ionic/exanptel/hooks/after prepare/010 add piatform class.is /Users/ainchao/temp/ionic/exampl 
el 


add to body class; ptatformrancro 过 

ANDROID HOME=/usr/ local/opt/ancroid-sdk 
JAVA_HOME=/Library/]aya/]avaVirtuatMachines/jdk1.8.9_66.jdk/Contentsy/Hone 
Downtpading http://services.gredle.ory/distributicns/gradle-2.2.1-all.zip 








grad1e/wrapper/dists/grad1e-2.2.1-a11/2r3005s69iugveoiejfejp9db 
Set executable pernissions for: /Users/qinchao/.gradle/wrapper/dists/gradle-2.2.1-all/2m8085s69iuBvooiejfej094b/gradle-2.2.1/bin/g 
radle 

Ponlond httpei)/repot. noven: ero/invend/eon/ endrodd/ toolsr utarama /LB.o/aredter 
Down load https://repol. maven.org/maven2/con/android/tools/build/gradle-core/1,5. 

Down load https://repol.maven, org/raven2/con/android/tools/build/builcer/1.5.0/bui lder- 


图 2.43 找到 Android 实体 机 设备 启动 APP 构建 过 程 


如 果 构 建 过 程 一 切 顺利 ，Ionic CLI 将 能 在 Android 实体 机 设备 成 功 部 署 和 启动 测试 APP， 
如 图 2.44 的 输出 显示 了 “LAUNCH SUCCESS” 的 字样 。 


[3] 
+generateDebugBuildConfig 引 
:generateDebugAssets UP-TO-DATE 
:mergeDebugAssets 
:generateDebugResValues 
:generateDebugResources 
imergeIebugResources 
:processDebugManifest 
ocessDebugAesources 
nerateDeDugSOurCes 
:compileDebugJavaWithJavacNote: Sone input files use or override a deprecated API. 
Note: Reconpile with -Xlint:deprecation for details. 

















:compileDebughdk UP-TO-DATE 
:compileDebugsources 
:transfornClassesWithDexForDebug 
:mergeIebugJniLibFotders 
ransfornNative_LibswithergeJniLibsForDebug 
ocessDebug]avaRes UP-TO-DATE 
ansfornResouresWithwergeJavaResForDebug 
:validateDebugSisning 

4packageDebug 

:zipalignDebuy 

Semb leDebuy 

:cdvBuildDebug 








BUILD SUCCESSFUL 


Total time; 39 mins 30.486 secs 

Built the following apk(s): 
/Users/qinchao/temp/ionic/exanplel/platforns/android/build/outputs/apk/android-debug.apk 

Using apk; /Users/qinchao/temp/ionic/examplel/platforns/android/build/outputs/apx/android-debug.apk 

LAUNCH SUCCESS 

(EEEEN) exanplel 

I/ 











图 2.44 在 Android 实体 机 设备 成 功 部 署 和 启动 APP 


此 时 连接 的 Android 实体 机 设备 应 该 如 本 书 2.2.3 节 的 图 2.28 所 示 启 动 了 测试 APP。 因 为 
Android 实体 机 设备 上 显示 的 内 容 一 致 ， 这 里 就 不 再 重复 给 出 示例 图 了 。 
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了 .人 安装 开发 工具 Sublime Text 3 (推荐 ) 


在 本 节 前 面 ， 读 者 根据 开发 机 的 操作 系统 ， 应 该 分 别 通 过 2.2 或 2.3 的 阅读 和 安装 实验 ， 
完成 了 Ionic 环境 和 硬件 设备 环境 的 安装 调试 , 可 以 正式 进入 开发 了 。Ionic 框架 本 身 是 开源 项 
目 , 目前 并 没有 专 有 的 IDE 开发 环境 用 于 开发 。 本 节 笔 者 推荐 介绍 适合 使 用 Ionic 进行 跨 平台 
移动 APP 开发 的 免费 代码 工具 Sublime Text 3 供 读者 选用 。 








2.4.1 安装 开发 工具 Sublime Text 3 


Sublime Text 3 是 当前 比较 适合 Ionic 开发 的 跨 平台 (支持 Windows、Linux、OSX) 文本 
编辑 器 , 它 的 优势 在 于 其 漂亮 的 用 户 界面 、 多 窗口 视图 布局 和 强大 的 功能 。 读者 可 以 到 其 官方 
网 站 https://www.sublimetext.com/3 根据 开发 机 的 操作 系统 下 载 安 装 ， 参 见 图 2.45 所 示 。 


Sublime Text 3 
Download 


Sublime Text 3is currently in beta. The latest build s 3114. 


° OS5X(107 or ee ee 
° Windows- also h 
. 二 Nodal ta en 
Ubuntu 64 bit- also available as a tarball for other Linux distributions 
Ubuntu 32 bit- also avallable as a tarball for other Linux distributions 
Sublime Text may be downloaded and evaluated for free, however a license must be 
hased for continued use There Is currenty no enforced ume limit for the 
evaluation. 


For notification about new versions, follow sublimehq on twitter. 





Even more bleeding-edge versions are available in the dev builds. 





图 2.45 Sublime 3 官方 网 站 下 载 页 


Sublime Text 3 被 安装 完毕 后 ， 读 者 可 以 启动 它 ， 尝 试 使 用 它 打开 任何 目录 ， 点 击 菜单 
View 一 Layout 一 Grid 4， 切 换 成 4 个 子 窗口 视图 模式 ， 类 似 图 2.46 所 示 。 笔者 在 外 接 大 屏幕 显 
示 器 的 时 候 经 常 使 用 这 种 窗口 模式 来 分 类 ， 同 时 查看 本 书后 面 章 节 会 介绍 的 页 面 模板 、 
AngularJS 控制 器 (controller) 、AngularJS 服务 ， 以 及 SCSS 样式 这 4 类 文件 。 由 于 一 个 功能 
相关 的 多 部 分 代码 能 做 到 同 屏 显 示 而 不 用 切换 窗口 来 查看 ， 这 样 能 达到 较 高 的 产 出 和 调试 效 
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图 2.46 推荐 的 Sublime 3 多 视图 窗口 布局 


2.4.2 ”安装 lonic 辅助 编码 插件 


Sublime Text 3 的 Package Control (扩展 包 管 理 器 ) 是 它 用 于 安装 管理 其 他 扩展 的 重要 工 
具 ， 因 此 需要 尽快 安装 。 读 者 可 以 打开 网 址 https://packagecontrol.io/installation， 找 到 页 面 内 如 
图 2.47 所 示 的 SUBLIME TEXT3 代码 部 分 复制 下 来 。 如 果 读 者 访问 该 网 址 有 困难 ， 可 以 在 随 
所 代码 的 根 目录 名 为 install-sublime-text3-package-control.txt 的 文件 , 该 文件 的 内 容 即 为 
需要 拷贝 的 代码 部 和 





SUBLIME TEXT3 SUBLIME TEXT2 


RE nla 


8b 








图 2.47 安装 Sublime 3 的 扩展 包 管理 网 页 代码 部 分 


随后 点 击 菜单 View 一 Show Console, 在 显示 的 Sublime Text 3 的 控制 台中 粘贴 上 一 步 复 制 
的 代码 并 回 车 执行 。Sublime 3 会 提示 运行 成 功 且 需要 重启 。 

依照 要 求 重启 后 点 击 菜单 Preferences 一 Package Control， 然 后 在 弹出 的 对 话 框 内 输入 
Install Package 并 回 车 确认 ， 如 图 2.48 所 示 。 
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Fle Edit Selecion Find View Goto Tools Project Preferences Help 


Package Control: Install pa 


Package Control: Install Pack=oe 
Package Control: Install Pa 








图 2.48 使 用 Package Control 进入 插件 安装 


在 随后 出 现 的 图 2.49 所 示 的 对 话 框 内 继续 输入 Ionic， 就 可 以 从 筛选 出 的 列表 中 选择 一 个 
用 于 辅助 输入 和 完成 Ionic 框架 AngularJS 指令 的 代码 片段 的 插件 安装 ， 并 开始 使 用 。 读 者 可 
以 在 学 习 和 开发 过 程 中 慢 慢 感受 到 所 安装 的 插件 带 来 的 输入 便利 , 限于 篇 幅 这 里 就 不 再 详细 介 
绍 了 。 


Fle Edit Selecion Find View Goto Tools Project Preferences Help 








图 2.49 ”使 用 Package Control 安装 Ionic 框架 开发 辅助 插件 


小 结 


本 章 的 内 容 虽 未 具体 介绍 Ionic 框架 下 的 代码 开发 ， 但 是 却 关系 重大 。 由 于 国内 的 网 络 环 
境 ， 很 多 初学 者 都 未 能 顺利 在 测试 硬件 上 安装 运行 一 个 最 简单 的 APP 应 用 。 只 有 完成 本 章 的 
开发 调试 环境 安装 和 开发 工具 的 设 定 后 , 才能 为 后 续 章 节 的 顺利 开发 调试 和 部 署 打下 基础 , 希 
望 本 书 的 读者 能 顺利 完成 本 章 的 安装 过 程 。 从 下 一 章 开始 , 本 书 就 要 进入 代码 基础 知识 解说 模 


式 了 。 
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第 3 章 
4AngularJs Vv1.Xx 人 入门 初步 > 





本 章 将 介绍 使 用 Ionic 框架 开发 前 掌握 的 AngularJS v1.x( 指 AngularJS 的 第 一 个 大 版 本 ， 
本 书 以 下 简称 为 AngularJS) 基础 知识 。 除 了 需要 明白 HIML 5/CSS 3/JavaScript 这 三 个 Web 
开发 的 基本 知识 ， 要 学 会 Ionic 开发 还 有 一 个 前 提 就 是 懂 AngularJS。 然 而 按 笔 者 的 估计 ， 初 
学 型 的 开发 者 要 完整 搞 懂 AngularJS 的 方方面面 , 怎么 也 得 读 一 本 几 百 页 专 讲 AngularJS 的 书 。 











为 了 不 偏离 本 书 主旨 ， 同 时 又 根据 2/8 原则 ， 笔 者 在 本 章 将 介绍 使 用 Ionic 框架 时 无 法 
AngularJS 整体 结构 和 最 重要 的 组 成 元 素 ， 而 有 些 旁 枝 末 节 或 是 关系 不 大 的 知识 点 将 被 
在 后 续 章 节 的 示例 代码 中 出 现 的 时 候 给 出 解释 。 


回避 的 
各 过 或 








如 有 读者 想 要 全 面 深入 学 习 AngularJS 知识 以 达到 能 够 深度 改写 和 扩展 Ionic 框架 


提供 的 


指令 组 件 的 能 力 ， 笔 者 建议 直接 参考 AngularJS 官方 网 站 完整 的 使 用 说 明 





版 的 优秀 AngularJS 书籍 。 





| (https://docs.angularjs.org/guide) 、API 文档 (https://docs.angularjs.org/api) 或 者 国内 外 出 





章 的 主要 知识 点 包括 : 

AngularJS 整体 结构 

代码 模块 与 依赖 注入 (Module & Dependency Injection ) 
数据 作用 域 与 控制 器 ( Scope & Controller ) 

服务 类 组 件 ( Service, Factory & Provider ) 

指令 和 过 滤器 ( Directive & Filter ) 

常用 的 AngularJS 内 置 组 件 


eeeeee@e 半 


AngularJs 整体 结构 概述 


接触 过 前 端 界面 开发 的 读者 应 该 都 用 过 或 者 听 说 jQuery 了 。AngularJsS 与 jQuery 
同 : AngularJS 是 一 个 JavaScript 开发 框架 ， 而 jQuery 是 一 个 JavaScript 工具 库 。 工 具 
士 军刀 , 使 用 者 觉得 合适 的 时 候 就 找到 它 的 某 个 部 件 用 一 下 , 但 是 它 基 本 不 会 对 使 用 者 
多 要 求 或 者 严格 限制 , 比如 瑞士 军刀 不 会 要 求 小 刀 和 开 瓶 器 一 定 需 要 一 起 配合 使 用 ; 而 
架 则 大 不 相同 , 它 已 经 通过 自 有 的 部 分 组 成 了 一 个 环 环 相 扣 的 有 机 整体 , 严格 约定 了 使 


























大 不 相 
库 像 瑞 
提出 过 
开发 框 
用 者 在 
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哪里 可 以 自由 组 合 ,在 哪里 必须 按部就班 。 只 有 遵照 它 的 要 求 嵌入 和 组 合 ,才能 保证 体系 在 拼 
装运 行 时 能 正常 工作 。 因 此 庞大 严谨 的 AngularJS 相对 于 灵活 的 jQuery 要 难 学 一 些 ， 不 把 
AngularJS 开发 应 用 的 整体 结构 和 各 部 分 组 件 职能 了 解 清楚 ， 会 觉得 没 处 下 手 或 是 使 用 时 如 哺 
五 里 雾 中 ， 即 使 勉强 完成 应 用 ， 也 在 其 中 埋 了 一 些 坑 等 着 后 人 来 慢 慢 填 。 

因此 本 节 将 先 从 AngularJS 的 整体 入 手 , 向 读者 简单 介绍 这 个 重型 框架 的 四 大 特性 和 有 关 
的 组 件 。 图 3.1 是 笔者 简化 过 的 典型 AngularJS 应 用 结构 图 ， 图 中 前 端 区 域 包括 了 本 章 将 要 介 
绍 的 大 部 分 内 容 ， 除 了 代码 模块 和 依赖 注入 这 两 个 抽象 概念 和 变形 过 滤器 这 个 工具 类 组 件 。 














图 3.1 典型 AngularJS 应 用 的 概要 组 件 图 


3.1.1 AngularJS 实现 了 M.V.VM 模式 


MVVM 模式 是 Model-View-ViewMode 模式 的 简称 。 由 视图 (View) 、 视 图 模型 
(ViewModel) 、 模 型 (Model) 三 部 分 组 成 ， 通 过 这 三 部 分 实现 UI 逻辑 、 呈 现 逻 辑 和 状态 控 
制 、 数 据 与 业务 逻辑 的 分 离 。 图 3.1 中 从 下 至 上 组 成 MVVM 的 3 部 分 展现 了 : 

@ ”模型 (Model) 用 于 封装 与 应 用 程序 的 业务 逻辑 相关 的 数据 以 及 对 数据 的 处 理 方法 。 
它 代表 了 对 后 端 数 据 直接 访问 的 权利 ,例如 对 数据 库 的 访问 ( 后面 我 们 会 看 到 ， 这 是 
通过 服务 Service 来 代理 完成 的 ) 。 模 型 本 身 并 不 依赖 于 视图 和 视图 -模型 。 

@ 视图 -模型 (View-Model) 在 中 间 负 责 与 模型 和 视图 互动 ， 将 模型 的 最 新 状态 发 送 到 
视图 ， 由 其 利用 HTML 和 CSS 来 渔 染 内 容 。 

@ 视图 (View) 是 AngularJS 解析 后 泻 染 和 绑 定 后 生成 的 HIML。 

AngularJS 使 用 MVVM 模式 获得 了 4 大 好 处 : 

1 . 低 耦 合 


视图 可 以 独立 于 模型 变化 和 修改 ， 一 个 视图 -模型 可 以 绑 定 到 不 同 的 视图 上 。 当 视图 变化 
的 时 候 模型 可 以 不 变 ， 当 模型 变化 的 时 候 视 图 也 可 以 不 变 。 
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2 . 可 重用 性 

可 以 把 一 些 视图 的 逻辑 放 在 视图 -模型 里 面 ， 让 很 多 视图 重用 这 段 视 图 逻辑 。 

3 . 开发 与 设计 工作 可 分 离 

开发 人 员 可 以 专注 于 业务 逻辑 和 数据 的 开发 (视图 -模型 ) 。 设 计 人 员 可 以 专注 于 界面 ( 视 
图 ) 的 设计 。 

4 . 可 测试 性 

可 以 依据 测试 归 约 构造 视图 -模型 来 对 界面 (视图 ) 进 行 测试 。 


3.1.2 AngularJS 为 JavaScript 实现 了 模块 化 


把 系统 分 割 成 多 模块 (Modules) 的 目的 是 通过 定义 公共 APIs、 限 制 行为 〈 功 能 ) 和 数据 
〈 属 性 和 变量 ) 的 可 视 化 ， 从 而 实现 问题 领域 分 离 〈Separation of Concems) 。 大 部 分 的 编程 
语言 内 置 了 对 模块 化 的 支持 ， 但 是 客户 端 JavaScript 并 没有 原生 支持 。 因 此 ， 作 为 一 个 完整 的 
开发 框架 ，AngularJS 实现 了 自己 的 模块 化 系统 。 这 个 系统 有 以 下 重要 特性 : 


@ ”组 件 寄生 于 模块 中 。 在 定义 与 使 用 本 章 后 面 介绍 的 控制 器 、 指 令 、 过 滤器 和 服务 组 件 
时 ， 必 须 指 明 其 所 属 的 模块 系统 ( AngularJS 自 带 的 核心 组 件 除外 ) 。 
@ 使 用 依赖 注入 。 尽 管 服务 组 件 是 普通 的 JavaScript 对 象 或 函数 ， 但 为 了 不 污染 整体 命 
空间 ， 这些 服务 不 是 定义 在 全 局 空间 上 , 而 是 需要 声明 了 对 其 的 依赖 ,才能 在 其 他 
模块 中 使 用 它们 。 











最 新 的 JavaScript 标准 ES6 已 经 开始 支持 和 引入 类 似 的 模块 化 概念 ， 因 此 AngularJS 的 第 
二 个 大 版 本 ， 也 就 不 用 再 自己 实现 模块 方案 ， 而 直接 采用 ES6 的 模块 标准 了 。 











3.1.3 AngularJS 实现 了 声明 式 界面 


使 用 AngularJS 框架 标准 的 Web 页 面 最 显著 的 特点 是 它们 表面 上 都 是 多 了 一 些 特别 的 属 
性 tag (如 : ng-app、ng-model、ng-controller 等 ) 或 者 元 素 tag (如 : ng-include、ng-form 等 ) 
的 静态 HTML 文档 ， 却 能 具有 动态 行为 能 力 。 

在 Angular 中 ， 这 类 HTML 文件 被 称 为 模板 ， 而 ng-app 这 类 标记 被 称 之 为 指令 。 模 板 通 
过 指令 指示 AngularJS 进行 必要 的 操作 。 比如 : ng-app 指令 就 被 用 来 通知 AngularJS 自动 引导 
一 个 AngularJs 应 用 。 

当 AngularJS 启动 应 用 时 ， 它 会 通过 一 个 编译 器 解析 处 理 这 个 模板 文件 ， 生 成 的 结果 就 是 
3.1 里 的 视图 部 分 。 


3.1.4 AngularJS 实现 了 双向 数据 绑 定 
目前 市 面 上 大 多 数 的 前 端 框架 或 库 在 数据 模型 和 视图 之 间 实 现 的 都 是 单 向 数据 绑 定 , 而 双 
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向 数据 绑 定 是 AngularJS 较 有 特色 之 处 。 

图 3.2 中 左边 的 模型 图 显示 了 单 向 数据 绑 定 的 常用 模式 ， 即 数据 模型 与 HTML 模板 结合 
生成 了 一 次 性 的 视图 ,数据 流 是 单 向 的 。 而 图 3.2 中 右边 的 模型 图 显示 的 视图 与 模型 之 间 是 有 
相互 交互 机 制 的 ， 从 而 使 视图 与 模型 互相 形成 数据 成 为 可 能 ， 所 以 称 之 为 双向 数据 绑 定 。 而 这 
个 交互 机 制 就 是 通过 图 3.1 中 的 视图 模型 来 完成 的 。 





One-Way Data Binding Two-Way Data Binding 





图 3.2 单 向 数据 绑 定 与 双向 数据 绑 定 区 别 
那么 为 什么 需要 双向 数据 绑 定 呢 ? 它 的 意义 在 于 给 开发 人 员 带 来 便利 性 和 减少 了 烦 琐 易 
错 的 手工 编写 两 层 之 间 数 据 同步 的 工作 量 : 

@。” 用 户 通过 视图 里 的 控件 调整 了 语言 配置 、 调 整 了 夜间 模式 、 输入 了 数据 项 ,这 些 行为 
可 以 用 几乎 自动 的 方式 来 更 新 到 数据 模型 

@ 。” 当 数据 模型 变化 了 ， 比 如 地 理 位 置 变化 了 、 网 络 情况 变化 了 、 同 步 /异步 推送 的 数据 
流 变化 了 (比如 实时 聊天 类 应 用 ) 、 被 其 他 视图 的 输入 改变 了 ， 所 有 视图 都 能 几乎 自 
动 地 持续 反应 数据 模型 的 变化 。 





请 注意 上 面 两 段 话 里 都 出 现 的 几乎 自动 这 四 个 字 , 它 使 设计 人 员 和 开发 人 员 的 任务 分 离 成 
为 可 能 。 也 正 因为 有 这 个 便利 性 为 AngularJS 带 来 的 成 功 ， 使 后 续 出 现 的 Vuejs、ReactJS 等 
前 端 框架 , 在 是 否 支持 以 及 如 何 支持 双向 数据 绑 定 上 都 面临 一 个 艰难 的 决定 〈 实 现 双 向 数据 绑 
定 也 会 带 来 一 系列 副作用 ， 这 就 不 属于 本 书 讨论 的 范围 了 ) 。 











一 本 章 前 面 的 各 节 概 念 很 多 ,初学 者 容易 产生 能 看 懂 文 本 里 的 每 个 词 ， 但 却 不 知道 实现 一 个 
AngularJS 功能 页 面 到 底 该 如 何 去 做 。 产 生 这 种 言 人 摸 象 的 现象 这 并 不 奇怪 ， 毕 况 
AngularJS 框架 的 运行 时 底层 依照 设计 时 的 强制 约定 默默 做 了 很 多 台面 底下 的 工作 才 把 这 
些 概 念 和 组 件 紧密 整合 到 一 起 。 因 此 笔者 建议 读者 可 以 强 忍 烦 问 先 粗略 浏览 一 遍 3.1 节 至 
3.5 节 对 概念 形成 初步 印象 ,然后 通过 阅读 分 析 3.6 节 给 出 的 一 个 完整 的 AngularJS 范例 代 
码 ， 再 回头 查看 前 面 印象 模糊 的 部 分 小 节 的 说 明 。 经 过 一 到 两 次 的 反复 理解 过 程 ， 就 能 上 

手 编写 基于 AngularJS 框架 的 应 用 了 。 
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也, 代码 模块 与 依赖 注入 


在 图 3.1 的 AngularJS 应 用 的 概要 组 件 图 中 没有 出 现 模块 的 字样 ， 然 而 这 不 代表 它 没 出 现 
在 图 里 。 实 际 上 图 中 的 指令 、 服 务 〈 句 柄 ) 、 控 制 器 都 是 定义 在 AngularJS 的 模块 里 。 读 者 从 
图 3.3 展现 的 图 中 可 以 看 到 所 有 类 型 的 AngularJS 组 件 都 是 归属 于 作为 容器 的 某 个 模块 的 。 








3.3 AngularJS 模块 与 组 件 定义 关系 


自然 地 ， 如 果 要 会 使 用 AngularJS， 就 需要 解决 两 个 问题 : 如 何在 模块 里 创建 组 件 以 及 如 
何 使 用 其 他 模块 里 的 组 件 。 下 文 的 3.2.1 和 3.2.2 节 将 分 别 回答 这 两 个 问题 。 


3.2.1 定义 模块 与 组 件 
定义 AngularJS 模块 的 代码 格式 比较 固定 ， 为 以 下 形式 : 


其 中 moduleName 是 字符 串 类 型 的 模块 名 ，importedModulesArray 代表 需要 被 本 模块 所 导 
入 的 其 他 模块 名 , 由 字符 串 数组 组 成 , 如 果 没 有 需要 导入 的 其 他 模块 , 也 需要 传 入 一 个 空 数 组 。 
返回 值 为 被 定义 出 来 的 模块 对 象 。 

在 完成 了 AngularJS 模块 的 定义 后 ， 也 可 以 通过 如 下 方式 调用 来 获得 模块 对 象 : 


其 中 moduleName 是 字符 串 类 型 的 模块 名 。 
而 定义 组 件 是 通过 调用 上 一 步骤 获得 的 模块 对 象 的 组 件 工厂 方法 完成 ， 形 式 如 : 
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其 中 的 controller 可 以 根据 需要 定义 的 组 件 类 型 而 更 换 成 flter、service 等 图 3.3 中 出 现 的 
类 型 英文 名 称 。componentName 是 字符 串 类 型 的 组 件 名 ， 该 组 件 需要 依赖 使 用 的 其 他 组 件 
otherComponentName1...otherComponentNameN 按 以 上 格式 依 序 使 用 字符 串 作 为 参数 传 入 ,而 
真正 的 模块 对 象 定义 函数 再 依 序 将 其 依赖 使 用 的 其 他 组 件 作为 函数 参数 的 一 部 分 。 


时 元 | 此 处 两 次 列举 出 依赖 使 用 的 其 他 组 件 列表 的 形式 是 为 了 避免 JavaScript 代码 混淆 器 造成 的 


副作用 而 使 用 的 ， 具 体 的 原因 读者 可 以 自行 参考 网 上 相关 的 介绍 文章 ， 此 处 不 再 闽 述 。 





把 两 个 步骤 合 在 一 起 ， 就 可 以 写 出 类 似 下 面 示例 3-1 的 代码 片段 了 。 


【示例 3-1 演示 了 定义 名 为 myApp 的 模块 并 在 myApp 模块 内 动态 定义 名 为 myCtrl 的 控 
制 器 组 件 。 





【代码 解析 】 定 义 名 为 myApp 的 模块 的 时 候 , 第 二 个 ["ionic"] 代 表 模 块 需要 引入 使 用 名 为 
ionic 模块 。( 此 处 仅 为 演示 目的 引入 ， 示 例 里 并 没有 使 用 Ionic 的 组 件 ) 随后 通过 对 myApp 
的 模块 实例 app 的 controller 方 法 调用 ,定义 了 名 为 myCtrl 的 控制 器 。 该 控制 器 依赖 于 AngularJS 
内 置 的 SrootScope 服务 组 件 。 在 控制 器 的 内 部 ， 利 用 $rootScope 组 件 分 别 定义 了 数据 模型 上 最 
顶层 的 根 作用 域 对 象 的 appName 属性 和 sayAppName 方法 。 


3.2.2 ”使 用 模块 与 组 件 依赖 注入 


使 用 模块 与 组 件 就 相对 容易 了 ， 在 示例 3-1 中 ， 定 义 名 为 myApp 的 模块 的 时 候 ， 就 通过 
最 后 的 参数 ["ionic"] 代 表 myApp 模块 需要 引入 使 用 名 为 ionic 的 模块 。 如 果 还 需要 引入 其 他 模 
块 ， 则 在 数组 里 使 用 同样 格式 增加 其 他 模块 名 即 可 。 

组 件 依赖 注入 也 同样 体现 在 了 示例 3-1 中 。 由 于 myCtrl 控制 器 组 件 需要 (依赖 )SrootScope 
的 服务 ， 因 此 这 里 把 作为 AngularJS 内 置 的 SrootScope 服务 组 件 通过 指定 的 格式 放 入 了 myCtrl 
控制 器 组 件 的 定义 函数 签名 中 。AngularJS 的 注入 服务 将 自动 处 理 定位 $rootScope 服务 组 件 并 
获取 其 处 于 缓存 中 的 句柄 ， 在 myCtrl 控制 器 组 件 被 创建 时 以 函数 参数 方式 注入 。 
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3.2.3 AngularJS 模块 与 JavaScript 文件 


AngularJS 的 开发 小 组 推荐 了 一 个 基于 AngularJS 的 应 用 的 基于 模块 类 别 的 切 分 方案 ， 而 
Ionic CLI 生成 的 项 目 模板 基本 也 是 遵照 这 个 方案 ， 如 图 3.4 所 示 。 





图 3.4 AngularJS 应 用 基于 模块 类 别 的 切 分 方案 


一 般 是 图 3.4 中 的 第 二 层 的 每 个 组 件 类 型 方 框 分 别 实现 到 一 个 JavaScript 文件 中 ， 并 为 每 
个 组 件 类 型 单独 建立 一 个 模块 。 而 项 部 的 app 应 用 模块 也 作为 入 口 点 文件 , 声明 对 其 他 模块 的 
引用 依赖 。 


可 . 了 数据 作用 域 与 控制 器 


了 解 了 模块 、 组 件 的 概念 以 及 定义 创建 它们 的 方法 , 就 可 以 开始 进入 各 种 具体 的 组 件 类 型 
的 学 习 了 。 在 图 3.1 AngularJS 的 组 件 中 ， 可 以 看 到 数据 作用 域 Scope( 以 下 简称 为 作用 域 ) 代 
表 了 数据 模型 。 而 之 所 以 作用 域 放 到 控制 器 Controller (以 下 简称 为 控制 器 ) 内 ， 是 用 于 说 明 
控制 器 的 主要 任务 之 一 是 在 作用 域 上 定义 业务 逻辑 。 具体 来 说 , 使 用 控制 器 可 以 对 作用 域 对 象 
进行 以 下 初始 化 : 

@@ ”初始 化 定义 JavaScript 属性 。 

@@ ”初始 化 添加 JavaScript 方法 。 


正 因为 两 者 之 间 的 密切 联系 ， 本 节 将 这 两 种 AngularJS 组 件 放 在 一 起 讨论 。 


3.3.1 在 控制 器 内 初始 化 作用 域 对 象 
可 以 近似 地 认为 每 个 控制 器 都 有 一 个 对 应 的 作用 域 对 象 , 而 这 个 对 应 的 作用 域 对 象 是 通过 
$scope 这 个 服务 组 件 来 访问 的 ， 访 问 方式 与 示例 3-1 的 SrootScope 类 似 。 
【示例 3-2 】 JavaScript 文件 片段 , 在 名 为 myApp 的 模块 内 动态 定义 名 为 myCtrl 的 控制 器 
组 件 ， 该 组 件 将 使 用 $scope 初始 化 与 其 对 应 的 作用 域 对 象 。 
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【代码 解析 】 此 处 获取 myApp 模块 实例 后 直接 调用 controller 方法 来 定义 名 为 myCtrl 的 
控制 器 。 这 次 该 控制 器 依赖 于 AngularJS 内 置 的 SrootScope 和 $scope 服务 组 件 。 在 控制 器 的 内 
部 ， $rootScope 组 件 的 使 用 方式 与 示例 3-1 没有 变化 。 不 同 的 是 使 用 与 调用 类 似 $rootScope 
的 方式 来 定义 了 myCtrl 控制 器 对 应 的 数据 模型 - 域 对 象 的 localData.dataName 属性 和 
localData.sayDataName 方法 。 


3.3.2 ”使 用 作用 域 对 象 

完成 了 3.3.1 节 后 ,控制 器 对 应 的 数据 模型 - 域 对 象 已 经 被 初始 化 好 了 , 那么 如 何 才能 在 视 
图 中 使 用 它 呢 ? 还 是 用 代码 来 直接 描绘 典型 的 代码 场景 实现 片段 吧 。 

【示例 3-3】HTML 视图 片段 ， 在 视图 里 显示 和 操作 myCtrl 控制 器 对 应 的 数据 模型 - 域 对 
象 的 属性 。 








构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


58 


</div> 
</body> 


【代码 解析 】 此 处 代码 有 几 个 地 方 与 普通 的 HTML 代码 不 一 样 。 其 中 分 别 是 : 


body 标签 的 ng-app 属性 代表 了 这 是 一 个 AngularJS 应 用 的 页 面 ，body 标签 内 部 的 内 
容 展现 和 事件 处 理 将 会 转 由 AngularJS 框架 进行 统一 管理 。 在 3.6 节 读 者 将 能 看 到 将 
ng-app 的 属性 设置 为 具体 某 模块 名 的 意义 与 带 来 的 结果 说 明 。 
div 标签 的 ng-controller 属性 代表 了 该 标签 与 其 内 部 所 绑 定 对 应 的 数据 模型 就 是 在 
myCtrl 控制 器 内 通过 $scope 定义 的 域 对 象 。 因 此 该 域 对 象 拥 有 localData.dataName 属 
性 和 localData.sayDataName 方法 。 而 AngularJS 框架 在 执行 到 这 里 的 时 候 ， 会 创建 
myCtrl 控制 器 的 实例 ， 从 而 也 就 创建 了 一 份 它 对 应 的 数据 模型 的 实例 。 
事实 上 ， 使 用 过 PHP、Ruby on Rails、Express 等 服务 器 端 HTML 模板 技术 的 读者 对 
这 种 使 用 { 和 } 来 绑 定 在 控制 器 的 成 员 变 量 值 并 显示 在 视图 里 的 写法 应 该 并 不 陌生 。 
{{ rootData.appName }} 代 表 了 读 取 myCtrl 控制 器 的 域 对 象 或 是 该 域 对 象 的 继承 树 中 
位 于 上 方 的 上 级 域 对 象 的 appName 属性 。 此 处 因为 myCtrl 控制 器 的 域 对 象 内 并 没有 
rootData 对 象 属性 , 因此 最 终 上 漳 , 找到 了 使 用 $rootScope 定义 的 rootData 对 象 属性 ， 
随后 类 似 于 通过 代码 读 取 了 S$rootScope.rootData.appName 的 值 ， 并 用 这 个 文本 值 直接 
替换 掉 {{ rootData.appName }}。 
{{ localData.dataName }} 的 处 理 方 法 与 {{ rootData.appName }} 类 似 ， 只 不 过 因为 
myCtrl 控制 器 的 域 对 象 内 有 localData 对 象 属性 ， 因 此 不 用 再 向 上 查找 ， 类 似 于 通过 
代码 直接 读 取 $scope.localData.dataName 的 值 ， 并 把 它 的 文本 值 直 接替 换 掉 
{{ localData.dataName }} 。 
input 标签 的 ng-model 属性 负责 了 将 控件 的 value 与 myCtrl 控制 器 的 域 对 象 的 
localData.dataName 对 象 属性 进行 双向 绑 定 。 最 终 产 生 的 效果 是 : 页 面 初始 加 载 后 ， 
输入 栏 的 值 为 “My Controller Data”; 而 当 用 户 修改 输入 栏 的 值 时 (假设 输入 了 “Hello 
My Controller” ) ， 用 户 的 输入 值 被 同步 到 绑 定 的 Sscope.localData.dataName 里 ， 而 上 
面 {{ localData.dataName }} 由 于 单 向 绑 定 的 关系 ， 将 会 随 着 用 户 的 输入 ， 不 断 刷新 显 
示 输 入 栏 的 值 ， 最 后 显示 的 值 也 是 “Hello My Controller”。 这 里 值得 一 提 的 ng-model 
正 是 一 个 我 们 在 3.4 节 要 学 习 的 指令 (Directive ) ， 它 构成 了 图 3.1 中 视图 -模型 
(View-Model ) 的 部 分 。 


综合 示例 3-2 和 示例 3-3， 可 以 发 现 作 用 域 对 象 在 基于 AngularJS 框架 开发 中 占据 非常 重 
要 的 位 置 ， 因 为 它 就 是 我 们 常 说 的 数据 模型 。 而 用 来 操作 作用 域 对 象 的 gscope 服务 组 件 ， 也 
因而 意义 重大 。 为 了 帮助 读者 在 后 续 的 开发 中 少 走 弯路 ， 笔 者 这 里 列举 出 来 一 些 $scope 的 特 
点 供 揣摩 理解 : 





$scope 是 一 个 POJO(Plain Old JavaScript Object)。 
$scope 提供 了 一 些 工具 方法 Swatch/$apply。 


第 3 章 ， AngularJS v1x 入 门 初步 


$scope 是 表达 式 的 执行 环境 (或 者 叫 作用 域 ) 。 

$scope 是 一 个 树 型 结构 ， 与 HTML 页 面 里 DOM 的 标签 平行 。 

$scope 对 象 会 继承 父 6scope 上 的 属性 和 方法 。 

每 一 个 AngularJS 应 用 只 有 一 个 根 $scope 对 象 (一 般 属于 声明 了 ng-app 属性 的 容器 
元 素 ) ， 可 使 用 $rootScope 直接 访问 。 

$scope 可 以 传播 事件 ， 类 似 DOM 事件 ， 可 以 向 上 (使 用 emit 方 法 ) 也 可 以 向 下 (使 
用 broadcast 方法 ) 。 

@ $scope 不 仅 是 建立 MVVM 的 一 部 分 ， 也 是 实现 双向 数据 绑 定 的 基础 。 








这 里 对 $scope 的 介绍 非常 简单 ， 更 深入 地 了 解 是 很 有 必要 的 。 笔 者 推荐 学 有 余力 的 读 
者 可 以 参阅 专门 介绍 AngularJS 框架 主题 的 书籍 与 作用 域 有 关 的 章节 ， 本 书 就 不 再 重 
复 着 重 介绍 了 。 











3.3.3 ”控制 器 与 作用 域 的 反 模 式 


AngularJS 的 初学 者 出 于 直觉 或 者 省 事 考虑 ， 很 自然 地 就 会 往 控制 器 与 作用 域 放置 不 必要 
的 业务 逻辑 。 然 而 正确 的 做 法 是 , 控制 器 这 一 层 应 该 很 薄 。 也 就 是 说 ,应 用 里 大 部 分 的 业务 侵 
辑 和 持久 化 数据 都 应 该 放 在 AngularJS 的 服务 组 件 里 。 出 于 内 存 性 能 的 考虑 ， 控 制 器 实例 只 在 
需要 的 时 候 才 会 初始 化 ， 一 旦 不 需要 就 会 被 抛弃 。 因 此 当 用 户 切 换 或 刷新 视图 时 ，AngularJS 
框架 会 清空 当前 的 控制 器 以 及 与 其 对 应 的 作用 域 。 而 AngularJS 的 服务 组 件 是 一 旦 创建 即 常 驻 
内 存 的 单 例 对 象 , 除了 可 以 用 于 包装 业务 逻辑 ,提供 永久 保存 应 用 数据 的 接口 外 ,服务 组 件 也 
可 以 在 不 同 的 控制 器 之 间 通 过 依赖 注入 的 方式 被 使 用 。 

关于 控制 器 与 作用 域 ，AngularJS 有 以 下 几 个 总 结 出 来 的 控制 器 与 作用 域 反 模式 〈 即 不 被 
推荐 的 一 些 不 规范 做 法 ) : 


@ DOM 操作 : 应 当 将 DOM 操作 使 用 指令 进行 封装 ， 本 书 3.4 节 将 介绍 指令 。 

@ 交换 输出 形式 应 当 使 用 过 滤器 对 输出 显示 进行 转化 ， 本 书 3.4 节 将 介绍 过 滤器 。 

@ ”控制 器 内 有 复杂 的 业务 代码 : 业务 代码 应 当 使 用 服务 进行 封装 ， 本 书 3.5 节 将 介绍 服 
务 类 组 件 。 


也.4 指令 和 过 滤器 


AngularJS 的 指令 Directive 组 件 与 过 滤器 Filter 组 件 的 主要 使 用 场景 都 是 在 HTML 页 面 视 
图 里 。 这 两 种 组 件 与 其 他 AngularJS 组 件 一 样 ， 都 是 在 代码 模块 Module 内 定义 ， 只 不 过 它们 
的 实例 可 以 通过 AngularJS 框架 在 解析 HTML 页 面 视图 时 自动 创建 。 因 为 它们 都 对 作用 域 对 
象 在 页 面 展现 有 影响 ， 本 节 将 介绍 它们 的 一 些 基本 知识 。 
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3.4.1 指令 Directive 是 什么 

在 3.3.2 节 , 我 们 已 经 提前 接触 体验 过 AngularJS 框架 内 置 的 指令 (Directive) 了 。Angular]S 

建立 了 一 套 完整 、 可 扩展 、 用 来 帮助 Web 应 用 开发 的 指令 集 机 制 ， 它 使 得 HTML 可 以 转变 成 

“特定 领域 语言 (DSL)”， 是 用 来 扩展 浏览 器 能 力 的 技术 之 一 。 在 DOM 编译 期 间 ， 和 HTML 
关联 着 的 指令 会 被 AngularJS 框架 的 编译 器 检测 到 ， 并 且 被 调用 执行 。 这 种 机 制 使 得 指令 可 以 
为 DOM 指定 扩展 行为 ， 或 者 改变 HTML 原 有 组 件 的 默认 行为 。 

指令 的 实质 是 “ 当 关 联 的 HTML 结构 进入 编译 阶段 时 应 该 执行 的 操作 ”， 它 只 是 一 个 当 
编译 器 编译 到 相关 DOM 时 需要 执行 的 函数 ， 可 以 被 写 在 HTML 元 素 的 名 称 ， 属 性 ，CSS 类 
名 和 注释 里 《后 两 种 形式 的 指令 出 现 和 应 用 较 稀 少 ) 。 

AngularJS 通过 称 为 指令 属性 来 扩展 的 HTML 控件 属性 ， 其 属性 名 称 带 有 前 级 ng-， 它 的 
实质 是 绑 定 在 DOM 元 素 上 的 函数 。 在 该 函数 内 部 可 以 操作 DOM、 调 用 方法 、 定 义 行 为 、 绑 
定 控制 器 及 $scope 对 象 等 。 当 浏览 器 启动 、 开 始 解析 HIML 时 ，DOM 元 素 上 的 指令 属性 就 会 
跟 其 他 属性 一 样 被 解析 , 也 就 是 说 当 一 个 AngularJS 应 用 启动 ,AngularJS 编译 器 就 会 遍历 DOM 
树 来 解析 HTML, 寻找 这 些 指令 属性 函数 , 在 一 个 DOM 元 素 上 找到 一 个 或 多 个 这 样 的 指令 属 
性 函数 ， 它 们 就 会 被 收集 起 来 、 排 序 ， 然 后 按照 优先 级 顺序 被 执行 。AngularJS 应 用 的 动态 性 
和 响应 能 力 , 都 要 归功 于 指令 属性 。 比 较 常 见 的 有 在 示例 3-3 中 出 现 过 的 : ng-app、ng-controller、 
ng-model ， 此 外 其 他 的 如 ng-show/ng-hide、ng-class、ng-repeat 等 多 个 指令 。 本 书 将 在 它们 第 
一 次 出 现 的 位 置 结 合 示例 代码 解释 其 作用 。 


3.4.2 自 定 义 指令 及 使 用 


指令 是 AngularJS 框架 里 最 复杂 的 组 件 种 类 ， 没 有 之 一 。 因 为 指令 是 AngularJS 里 被 唯一 
能 操作 DOM 的 组 件 ， 并 且 构 成 了 图 3.1 中 数据 模型 与 视图 交流 互动 的 桥梁 。 出 于 复 用 和 定制 
的 目的 ， 做 AngularJS 应 用 开发 将 不 可 避免 要 碰 到 定义 自己 的 指令 的 需要 。 

根据 AngularJS 官方 网 站 的 API 参考 文档 和 作者 的 经 验 , 定义 一 个 指令 重要 参数 的 列表 如 
示例 3-4 所 示 。 


【示例 3-4】 定 义 一 个 AngularJS 指令 可 使 用 的 最 重要 的 参数 列表 。 
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【代码 解析 】 代 码 里 先是 遵照 3.2.3 节 建 议 的 AngularJS 模块 划分 方案 建立 了 名 为 
myDirectives 的 模块 用 于 包含 所 有 的 自 定义 指令 ， 随 后 定义 了 名 为 myDirective001 的 指令 。 由 
于 定义 一 个 指令 可 用 的 参数 太 多 , 而 有 些 参数 又 并 不 是 特别 重要 或 常用 , 因此 笔者 将 选择 关键 
的 一 些 来 说 明 , 其 他 被 本 书 忽略 的 完整 参数 列表 读者 可 以 自行 查看 AngularJS 的 官方 文档 说 明 

(https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object) : 


@ restrict (字符 串 ) 告诉 AngularJS 这 个 指令 在 DOM 中 可 以 何 种 形式 被 声明 ， 可 选 值 
为 EE (元素 ) A (属性 ) C (CSS 类 名 ) M (注释 ) 的 任意 组 合 ， 如 EA' 表 示 该 指令 可 
以 为 HTML 元 素 形式 或 是 某 HTML 元 素 的 属性 形式 ,这 也 是 被 推荐 使 用 的 两 种 形式 。 

@ template (字符 串 或 函数 ) 可 以 被 设置 为 一 段 HTML 文本 (字符 串 ) 模板 或 是 一 个 可 
以 接受 两 个 参数 的 函数 ， 参 数 为 tElement 和 tAttrs， 并 返回 一 个 代表 模板 的 字符 囊 。 

@ templateUrl (字符 串 或 函数 ) 可 以 被 设置 为 一 个 代表 外 部 HTML 模板 文件 路 径 的 字 
符 串 或 是 一 个 可 以 接受 两 个 参数 的 函数 ， 参 数 为 全 lement 和 tAttrs， 并 返回 一 个 外 部 
HTML 模板 文件 路 径 的 字符 串 。 

@ replace (布尔 型 ) 默认 值 为 false， 表 示 模 板 会 被 当 作 子 元 素 插入 到 调用 此 指令 的 元 
素 内 部 ， 否 则 模板 内 容 会 直接 替换 掉 调 用 此 指令 的 元 素 。 

@ scope (布尔 型 或 对 象 ) 参数 是 可 选 的 ， 默认 值 是 false， 表 示 该 指令 没有 自己 的 作用 
域 对 象 ; 当 它 被 设置 为 tue 时 ， 指 令 会 从 父 作用 域 继承 并 创建 一 个 新 的 作用 域 对 象 ; 
而 当 它 被 设置 为 对 象 时 ， 指 令 会 创建 一 个 包含 该 对 象 的 独立 作用 域 对 象 ， 这 里 所 谓 的 
独立 ， 是 指 通过 template 或 templateUrl 获得 的 模板 里 将 无 法 访问 外 部 作用 域 对 象 了 。 

@ controller ( 字符 串 或 函数 ) 当 设置 为 字符 串 时 ， 会 以 字符 串 的 值 为 名 字 来 查找 注册 在 
应 用 中 的 控制 器 的 构造 函数 ; 而 当 设 置 为 函数 时 , 将 在 指令 内 部 通过 调用 这 个 匿名 构 
造 函 数 的 方式 来 定义 一 个 内 联 的 控制 器 对 象 。 

@ jink( 函数) .如 果 需 要 在 指令 中 操作 DOM, 我 们 需要 定义 link 属性 。 其 中 AngularJS 
传 入 的 参数 scope 代表 指令 对 应 的 scope 对 象 , 如 果 指 令 没有 定义 自己 的 本 地 作用 域 ， 
那么 传 入 的 就 是 外 部 的 作用 域 对 象 ; jiElement 参数 代表 指令 所 在 DOM 对 象 的 jqLite 
封装 。 如 果 使 用 了 template 属性 ， 那么 下 lement 对 应 变换 后 的 DOM 对 象 的 jqLite 封 
装 ; iAttrs 参数 代表 指令 所 在 DOM 对 象 的 属性 集 。 这 是 一 个 Hash 对 象 ， 每 个 键 是 驼峰 
规范 化 后 的 属性 名 ; controller 参数 代表 指令 所 在 DOM 对 象 对 应 的 控制 器 对 象 实 例 。 


学 习 了 指令 的 定义 ， 就 可 以 写 一 个 最 简单 的 指令 来 练 手 了 。 


【示例 3-5】 定 义 一 个 最 简单 的 AngularJS 指令 hello。 
/定义 名 为 ' myDirectives "的 模块 ， 并 返回 模块 袍 
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【代码 解析 】 被 定义 的 指令 名 为 hello'， 是 元 素 型 的 指令 。 在 HTML 模板 中 的 该 hello 元 
素 的 内 容 将 被 模板 字符 串 代 蔡 ， 即 页 面 里 的 “<hello> 这 里 可 以 填 任 意 值 <hello>” 将 被 蔡 换 为 
“<div>Hello Ionic!</div>”， 然 后 在 DOM 中 泻 染 出 来 。 这 个 例子 过 于 简单 ， 稍 微 复杂 一 些 的 
例子 读者 可 以 参考 本 书 3.6 节 中 项 目 演示 中 的 名 为 stockCode 的 指令 组 件 。 


3.4.3 ”使 用 过 滤器 Filter 
过 滤器 用 来 格式 化 需要 展示 给 用 户 的 数据 。AngularJS 有 很 多 实用 的 内 置 过 滤器 ， 同 时 也 





提供 了 方便 的 途径 可 以 自己 创建 过 滤器 。 常 用 的 AngularJS 内 置 过 滤器 可 参见 表 3.1。 
表 3.1 AngularJS 内 置 过 滤器 及 其 说 明 

过 滤器 名 说 明 

格式 化 数字 为 货币 格式 
filter 从 数组 的 项 中 选择 一 个 子 集 

格式 化 字符 串 为 小 写 

根据 某 个 表达 式 排列 数组 

格式 化 字符 串 为 大 写 

格式 化 显示 日 期 
limitTo 只 显示 从 头 开始 或 者 从 结尾 开始 的 指定 数量 的 数组 元 素 、 字 符 串 字 符 或 数字 位 数 
mumber 格式 化 显示 数字 





在 HTML 模板 中 使 用 过 滤器 的 语法 与 Unix Shell 的 管道 操作 命令 很 相似 ， 如 : 
1 12345.6789 | namber 


的 输出 显示 为 12.345.679， 
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的 输出 显示 为 12,346， 


的 输出 显示 为 12,345.68。 


由 于 AngularJS 官方 网 站 (https://docs.angularjs.org/api/ng/filter) 已 有 内 置 过 滤器 的 详细 说 
明和 在 线 使 用 示例 ， 本 书 就 不 一 一 介绍 了 。 

与 控制 器 和 指令 类 似 ， 过 滤器 也 是 一 种 AngularJS 组 件 , 创建 一 个 过 滤器 的 形式 也 与 创建 
一 个 控制 器 类 似 。 


【示例 3-6】 定 义 一 个 字符 串 〈 如 一 个 句子 ) 的 首 字母 转换 成 大 写 形式 的 自 定义 过 滤器 。 





【代码 解析 】 被 定义 的 自 定义 过 滤器 组 件 名 为 'capitalize'， 在 获得 一 个 字符 串 后 ， 它 将 返 
回 把 原 字符 串 首 字母 转换 成 大 写 形式 的 结果 字符 串 。 从 代码 里 我 们 可 以 看 到 自 定义 过 滤器 的 代 
码 格式 要 求 : 


@ 必须 使 用 模块 的 filter(0) 接 口 注册 服务 。 
@ 必须 提供 对 象 工厂 方法 。 
@ ”对 象 工厂 必须 返回 一 个 过 滤器 函数 ， 其 第 一 个 参数 为 输入 变量 。 


随后 就 可 以 在 页 面 里 使 用 这 个 capitalize 过 滤器 了 ， 形 式 如 : 


的 输出 显示 为 Ionic is so coolll!。 注 意 原 ionic 的 首 字母 已 经 变 成 大 写 形式 了 。 


可 .5 服务 类 组 件 


在 本 书 前 面 的 3.3.3 节 提 到 过 , AngularJS 的 控制 器 组 件 的 实现 不 应 该 有 复杂 或 者 可 共用 的 
业务 代码 ,它们 应 当 使 用 服务 进行 封装 。 本 节 将 介绍 的 3 种 主要 服务 类 组 件 ， 除 了 一 些 细微 的 
差别 外 ， 它 们 都 可 以 用 于 封装 可 复 用 的 业务 逻辑 代码 。 
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AngularJS 提供 了 3 种 方式 来 定义 〈 注 册 ) 开发 者 自己 的 服务 : 


® Provider 
® Factory 
® Service 


由 于 Service 与 Factory 除了 代码 写法 上 有 差异 而 作用 与 实现 能 力 都 基本 一 致 ， 本 节 将 重 
点 介绍 Provider 和 Factory，Service 方式 将 简单 带 过 。 


3 由 于 Service 的 中 文 翻译 就 是 服务 , 而 Provider 和 Factory 直接 使 用 其 中 文 对 应 名 词 不 但 不 ] 


能 反映 组 件 实质 的 作用 ， 反 而 容易 引起 初学 者 思维 的 混乱 。 有 鉴于 此 ， 笔 者 在 本 书 将 直接 
| 使 用 这 3 个 英文 单词 本 身 而 不 使 用 中 文 对 应 名 词 来 表示 它们 。 





3.5.1 ”Provider 服务 组 件 详解 


Provider 是 唯一 一 种 可 以 传 进 .config() 函数 的 服务 组 件 。 如 果 想 要 服务 组 件 对 象 在 启用 之 
前 具有 先进 行 初始 化 配置 的 能 力 ， 则 必须 使 用 Provider。 

在 AngularJS 中 自行 开发 并 使 用 Provider 来 创建 服务 的 过 程 分 为 3 个 阶段 ， 由 于 涉及 
AngularJS 框架 本 身 的 注入 服务 ， 以 示例 的 方式 来 解说 将 更 加 易 懂 。 


【示例 3-7】 以 Provider 方式 开发 并 使 用 一 个 简单 的 问候 greet 服务 的 过 程 。 
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【代码 解析 】 代 码 块 的 执行 顺序 按时 间 轴 的 分 布 可 以 分 为 3 个 阶段 : 


@@ 首先 ， 使 用 provider() 方 法 定义 greet 服务 必须 要 实现 一 个 具有 S$get 方法 的 构造 函数 ， 
该 函数 需要 返回 未 来 可 以 作为 服务 组 件 使 用 的 对 象 。$get 方法 支持 依赖 注入 其 他 服 
务 ， 样 例 代码 中 为 了 演示 的 目的 注入 了 S$http 服务 ， 虽 然 并 没有 使 用 到 它 。$get 方法 
只 会 被 AngularJS 的 注入 服务 组 件 调 用 一 次 , 随后 返回 的 对 象 将 被 缓存 下 来 供 整 个 应 
用 全 局 使 用 。 

@ ”然后 (这 一 步 是 可 选 的 ), 在 AngularJS 的 应 用 模块 myApp 的 config 方法 里 对 Provider 
服务 组 件 进行 配置 。 注意 引用 配置 对 象 时 需要 加 上 Provider 后 级 , 如 本 示例 中 的 配置 
对 象 名 为 greetProvider。 示 例 代 码 中 把 原本 设 为 "Hello' 的 问候 语 前 组 覆盖 改 为 了 ' 你 好 '。 

@ 最 后 的 阶段 就 是 使 用 了 经 过 配置 的 greet 服务 了 。 还 是 通过 依赖 注入 的 方式 ， 其 他 模 
块 (控制 器 、 其 他 服务 组 件 等 ) 都 可 以 用 标准 方式 使 用 greet 服务 ,访问 服务 对 象 返 
回 的 方法 或 属性 。 示 例 这 里 调用 最 终 显示 的 问候 语 前 级 就 是 中 文 的 ' 你 好 '， 和 覆盖 了 原 
来 默认 的 'Hello'。 


3.5.2 ”Factory 服务 组 件 详 解 


使 用 Factory 方式 定义 服务 组 件 相 比 Provider 方式 更 为 简单 直观 ， 其 主要 做 法 就 是 创建 一 
个 对 象 ， 为 它 添加 属性 ， 然 后 把 这 个 对 象 返 回 出 来 。 


【示例 3-8】 以 Factory 方式 开发 并 使 用 类 似 示例 3-7 的 问候 greet 服务 的 过 程 。 
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【代码 解析 】 代 码 块 的 执行 顺序 就 只 分 为 了 定义 和 使 用 两 个 阶段 。 定 义 阶段 的 主要 任务 是 
返回 一 个 包含 函数 或 属性 的 对 象 ; 而 使 用 阶段 更 加 简单 , 通过 依赖 注入 的 方式 声明 对 服务 的 使 
用 后 ， 直 接 调 用 服务 组 件 实 例 的 方法 或 属性 即 可 。 从 代码 里 读者 可 以 看 到 要 分 析 Factory 方式 
定义 的 服务 组 件 也 很 简单 , 直接 找到 代码 里 被 最 终 返回 的 对 象 即 可 知道 服务 对 外 暴露 的 函数 或 
属性 接口 了 。 


3.5.3 Service 服务 组 件 简介 


使 用 Service 方式 定义 服务 组 件 与 Factory 方式 相 比 主 要 差异 在 于 前 者 不 需要 返回 对 象 ， 
而 是 直接 更 改 函 数 对 象 本 身 。 而 分 别 使 用 两 种 方式 定义 出 来 的 服务 组 件 其 使 用 方式 是 一 模 一 样 
的 。 


【示例 3-9】 以 Service 方式 开发 并 使 用 类 似 示例 3-7 的 问候 greet 服务 的 过 程 。 








【代码 解析 】 定 义 阶 段 的 主要 任务 是 为 函数 对 象 本 身 增加 函数 或 者 属性 ， 使 用 阶段 与 
Factory 服务 组 件 完全 一 致 。 
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3.5.4 ”服务 类 组 件 特性 总 结 


分 别 介绍 完 使 用 Provider、Factory 和 Service 三 种 方式 定义 和 使 用 服务 组 件 后 ， 有 必要 总 
结 一 下 服务 类 组 件 的 特点 ， 帮 助 读者 在 未 来 开发 和 使 用 时 查阅 和 把 握 : 


@ 服务 都 是 单 例 的 ， 一 旦 创建 则 被 缓存 起 来 循环 使 用 。 

服务 由 AngularJS 特殊 的 服务 组 件 $injector 负责 实例 化 。 
服务 一 旦 实例 化 ， 将 在 整个 应 用 的 生命 周期 中 存在 ， 可 以 用 来 共享 数据 。 
在 需要 使 用 的 地 方 利 用 依赖 注入 机 制 注入 服务 。 

依赖 注入 时 ， 自 定义 的 服务 需要 写 在 内 置 的 服务 后 面 。 

内 置 服务 的 命名 以 $ 符 号 开头 ， 自 定义 服务 应 该 避免 使 用 $ 前 缓 。 








更 灵活 而 复杂 的 依赖 注入 做 法 是 使 用 上 面 列表 中 提 到 的 $injector, 不 过 由 于 平常 时 用 不 上 ， 
[ 因此 ， 笔 者 这 里 不 介绍 了 。 有 兴趣 的 读者 可 以 参考 官方 文档 的 说 明 。 











了 .OO 一 个 简单 的 Angulars 项 目 : 实时 自选 股 
_ 
行情 页 
本 章 前 面 各 节 都 引入 了 相当 厚重 而 抽象 的 概念 ， 为 了 帮助 初学 AngularJS 的 读者 理解 ， 本 
节 将 开发 一 个 简单 但 基本 完整 覆盖 本 章 所 介绍 的 概念 和 组 件 的 AngularJS 项 目 来 演示 说 明 各 概 
念 与 组 件 的 定义 使 用 方法 和 严密 的 配合 工作 机 制 。 
示例 的 初始 页 面 如 图 3.5 所 示 ， 主 要 的 功能 点 有 两 个 : 


@ ”定时 刷新 显示 自选 股 的 行情 信息 ， 根 据 涨 跌 设 置 行 项 目 颜色 ( 涨 红 跌 绿 ) 
@ ”提供 用 户 维护 (增加 /删除 ) 自选 股 列表 的 功能 








股票 行情 显示 区 
代码 名 称 天 跌幅 流 路 籁 现价 开盘 价 昨 收 捧 作 
000858 五 粮 液 0.05% 0.02 37.14 37 37.12 人 
600048 保利 it 产 0.65% 0.06 3.28 9.26 922 
601857 中 国 五 油 0.14% 0.01 T7.38 7.37 737 出 
002594 比亚迪 2.92% 1.79 6239 61.63 61.2 
601965 中 国 汽 研 -1.36% -0.14 1015 103 1029 











图 3.5 使 用 AngularJS 开发 的 实时 股票 行情 页 
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后 台 行 情 数据 取 自 网 上 找到 的 新 浪 行情 接口 ，HTTP 访问 网 址 和 返回 结果 如 图 3.6 所 示 。 


= 4 二 
[hasinajscyfszh601C x EB 
€ © [Dhqsinajscmlist-sh601006.sh600030.s2002650 QQ 安 |Q 合 刘 国 四 网 国 可 


var haq_str_sh601006= "大秦 铁 

路 , 6. 110, 6. 110, 6. 110, 6. 150, 6. 090, 6. 100, 6. 110, 34304595, 209850859. 000, 14729 
04, 6. 100, 1064300, 6. 090, 841800, 6. 080, 590300, 6. 070, 538300, 6. 060, 12800, 6. 110 
， 799227, 6. 120, 1008120, 6. 130, 2080500, 6. 140, 2660088, 6. 150, 2016-07- 

15, 15:00:00, 00”; 

var ha_str_sh600030=“ 中 信 证 

券 , 17. 020, 16. 960, 16. 820, 17. 050, 16. 720, 16. 810, 16. 820, 72415614, 1220240897.0 








00, 82879, 16. 810, 171400, 16. 800, 312800, 16. 790, 1214102, 16. 780, 25800, 16. 770, 1 
19000, 16. 820, 161963, 16. 830, 92400, 16. 840, 95600, 16. 850, 83700, 16. 860, 2016- 
07-15, 15:00:00, 00”; 

var hq_str_sz002650=” 加 加 食 

品 ,7. 380, 7. 380, 7. 370, 7. 410, 7. 300, 7. 360, 7. 370, 10348918, 75935565. 400, 69750, 
7. 360, 23200, 7. 350, 29300, 7. 340, 29400, 7. 330, 240800, 7. 320, 76100, 7. 370, 267700 
， 7. 380, 269900, 7. 390, 291300, 7. 400, 86200, 7. 410, 2016-07-15, 15:05:03, 00” ; 


3.6 ”新 浪 行情 接口 和 返回 结果 
【示例 3-10】 使 用 AngularJS 框架 开发 的 实时 股票 行情 页 。 
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【代码 解析 jindex.html 文 件 是 应 用 的 入 口 文 件 ,在 HEAD 标 签 引 入 了 使 用 的 BootStrap 
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样式 库 、 自 定义 的 样式 库 文件 stock.css、AngularJS 的 库 文件 、 用 于 集合 操作 的 外 部 lodash 
库 和 依据 本 章 前 面 各 节 介 绍 的 AngularJS 主 应 用 、 控 制 器 、 服 务 和 指令 模块 定义 文件 。 注 
意 自 定 义 的 AngularJS 模块 文件 需要 在 AngularJS 的 库 文件 之 后 引入 。 页 面 视图 分 为 2 个 
区 域 : 


@@ 上 方 的 沪 深 A 股 行情 显示 区 使 用 了 stockListController 控制 器 ， 整 个 行情 表 都 将 使 用 
这 个 控制 器 提供 的 作用 域 对 象 。 表 格 的 TBODY 区 使 用 了 ng-repeat 指令 ， 这 是 用 于 
数组 型 作用 域 变量 循环 生成 HTML 子 元 素 的 常用 组 件 。TR 标签 的 ng-class 指令 用 于 
根据 作用 域 对 象 的 表达 式 动态 设置 CSS 样式 类 ， 这 里 的 实际 逻辑 是 涨幅 为 正则 附 
加 .inc 样式 类 ， 为 负 则 附加 .dec 样式 类 。 股 票 代码 栏 使 用 了 自 定义 的 指令 stock-code， 
并 将 股票 代码 item.code 设置 到 了 该 指令 的 info 属性 上 。 关 于 涨 跌幅 的 两 个 数字 输出 
都 使 用 了 number 过 滤器 用 于 四 含 五 入 只 显示 小 数位 后 2 位 数字 。 最 后 的 删除 按钮 上 
附加 了 ng-click 事件 ， 点 击 后 将 调用 作用 域 对 象 的 removeStock 方法 ， 传 入 参数 为 当 
前 项 的 股票 代码 。 

@ 下方 的 增加 股票 代码 操作 区 使 用 了 addStockController 控制 器 ， 用 于 输入 股票 代码 的 
INPUT 文本 控件 使 用 ng-model 与 作用 域 对 象 的 newStockCode 属性 绑 定 。 这 样 当 用 
户 按 下 “增加 ”按钮 或 是 在 文本 控件 里 按 回 车 键 时 ， 作 用 域 对 象 的 newStockCode 属 
性 会 同步 为 输入 框 内 的 值 ， 用 于 后 续 事件 处 理 的 参数 。 


两 个 区 域 组 合成 一 个 整体 ， 该 整体 用 一 个 DIV 标签 包容 ， 该 标签 的 DOM 对 象 对 应 于 
rootController 控制 器 。 该 控制 器 是 为 了 两 个 区 域 的 控制 器 通过 事件 通信 而 存在 的 。 


行 的 外 部 CSS 样式 库 BootStap。 然 而 Jonic 建立 
了 自己 的 CSS 样式 库 ， 与 BootStrap 并 不 适合 一 起 使 用 。 因 此 笔者 不 对 使 用 的 BootStrap 


样式 类 进行 深入 的 解释 了 , 读者 可 以 在 本 书 的 第 5 章 了 解 到 Tonic 内 置 CSS 样式 库 的 使 用 
方法 。 





主 应 用 模块 文件 js/app.js 的 代码 : 





【代码 解析 】 主 应 用 文件 的 代码 很 简单 ， 主 要 是 用 于 引用 载 入 应 用 涉及 的 控制 器 、 服 务 和 
指令 的 模块 。 此 外 为 了 演示 Provider 型 组 件 的 效果 ， 对 stockList 服务 在 设置 代码 块 设置 了 初 
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始 的 自选 股 列 表 ， 在 图 3.5 中 显示 的 列表 就 是 这 里 设置 指定 的 。 
控制 器 模块 文件 /js/controllersjjs 的 代码 
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【代码 解析 】 控 制 器 模块 文件 分 别 定 义 了 rootController 、stockListController 和 
addStockController 这 3 个 控制 器 ,它们 分 别 对 应 外 容器 与 页 面 视图 DOM 中 的 上 下 两 个 区 域 。 


值得 注意 的 是 刷新 自选 股 行情 列表 的 refresh() 方 法 是 使 用 stockListController 定 义 在 其 


内 部 作 


用 域 的 。 这 是 因为 在 下 方 区 域 执行 完 增加 自选 股 后 也 需要 马上 刷新 自选 股 行情 列表 。 因 此 下 
方 区 域 将 使 用 $emit() 方 法 往 上 发 射 一 个 名 为 StockList_Changed 的 事件 。rootController 通过 
$on() 函 数 侦 听 到 这 个 事件 后 ， 判 断 需 要 让 关心 此 事件 的 下 层 控 制 器 来 刷新 自选 股 行情 列表 。 
因此 使 用 $broadcast() 方 法 进行 了 广播 ， 注意 事 件 已 改名 为 Refresh_Table 。 正 在 侦 听 


Refresh_Table 事件 的 stockListController 调用 作用 域 对 象 的 refresh() 方 法 , 从 而 刷新 了 


自选 股 


行情 列表 。 此 外 $interval 服务 也 是 才 接 触 到 的 ， 它 可 以 理解 为 全 局 函数 setInterval0 的 封装 ， 


可 用 于 执行 周期 性 任务 。 不 过 使 用 它 能 激发 AngularJS 执行 作用 域 的 更 新 通知 机 制 ， 
适合 目前 的 场景 。 





因此 更 


代码 的 控制 器 里 使 用 了 本 章 3.3.2 节 介绍 的 作用 域 事件 上 传 与 广播 机 制 ,而 不 是 把 refreshO | 
方法 直接 定义 在 根 作用 域 上 来 使 其 他 作用 域 能 够 激发 自选 股 行情 列表 的 刷新 。 这 种 松散 看 
合 的 做 法 是 复杂 前 端 页 面 常见 的 组 件 间 解 耦 模式 ， 而 使 用 jQuery 开发 往往 是 把 组 件 间 的 
调用 设计 成 强 耦 合 的 方法 调用 模式 。 笔 者 不 做 过 多 评判 ,读者 可 以 思考 一 下 两 种 方案 的 利 





弊 和 分 别 适用 的 场景 。 J 


服务 模块 文件 /jis/servicesjs 的 代码 : 





( 第 3 章 AngularJS v1x 入 门 初步 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 服 务 模块 文件 分 别 使 用 factory0Q 和 provider () 方 法 定义 了 两 个 服务 类 组 件 。 
stockInfoService 组 件 用 于 从 后 端 行情 提供 方 获取 并 解析 数据 。 由 于 后 端 行情 提供 方 未 在 服务 
器 上 设置 好 CORS, 这 样 直 接 使 用 $http 服务 通过 get 方法 拿 数据 会 因为 浏览 器 的 默认 安全 设置 
而 阻止 AJAX 调用 。 因 此 代码 里 的 syncInfoList 方法 改 用 $http 服务 的 jsonp 帮助 方法 ， 获 的 数 
据 后 AngularJS 将 自动 执行 返回 的 全 局 变量 定义 脚本 , 这 样 就 把 自选 股 的 行情 列表 原始 数据 存 
放 到 了 多 个 全 局 变量 里 ， 随 后 getInfoList 方法 可 以 被 调用 来 解析 数据 。 两 个 函数 里 都 使 用 了 
lodash 库 〈 通 过 全 局 变量 _ ) 进行 数组 和 字符 串 的 处 理 ， 相 当 方便 。stockList 组 件 用 于 维护 视 
图 中 显示 的 自选 股 代码 列表 ， 因 此 提供 了 CRUD 中 除了 修改 〈 因 为 没有 意义 ) 的 函数 。 值 得 
注意 的 是 这 里 为 了 演示 的 目的 ， 提 供 了 自选 股 代码 列表 在 应 用 初始 启动 时 的 配置 接口 函数 
setCodeList， 在 主 应 用 模块 文件 /js/app.js 中 的 config 方法 块 里 对 它 进 行 了 调用 。 

指令 模块 文件 /js/directivesjs 的 代码 : 





【代码 解析 】 指 令 模 块 文件 出 于 演示 的 目的 ， 创 建 了 一 个 显示 股票 代码 指令 的 小 指令 组 件 。 
该 组 件 里 调用 了 AngularJS 框架 内 置 的 limitTo 筛选 器 用 于 去 掉 了 股票 代码 里 的 股票 市 场 前 绥 ， 
并 且 限 制 其 只 能 用 于 HIML 元 素 的 形式 。 

自 定义 的 样式 库 文件 /css/stock.css 的 代码 : 
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【代码 解析 】 自 定义 的 样式 库 文件 定义 了 视图 模板 文件 /index.html 里 ng-class 指令 可 能 加 
入 的 .inc 和 .dec 样式 类 ， 这 样 能 通过 颜色 和 字体 动态 区 分 股票 的 涨 跌 类 型 。 





汪 本 示例 的 重点 是 介绍 AngularJS， 并 未 针对 移动 应 用 进行 优化 ， 需 要 学 习 后 面 章节 的 知识 
来 增强 。 








经 过 增加 和 删除 模拟 操作 测试 使 用 后 的 页 面 如 图 3.7 所 示 。 
股票 行情 显示 区 


目 目 目 目 目 目 目 目 目 * 


单元 测试 、 集 成 测试 和 模拟 用 户 手工 测试 的 便利 性 。 本 书 这 里 由 于 篇 幅 的 关系 不 再 介绍 编 
写 测试 用 例 和 相关 工具 的 使 用 了 ， 有 兴趣 的 读者 可 以 自己 在 网 上 搜索 到 相关 的 资料 学 习 。] 





相信 看 完 本 节 示 例 项 目 代 码 的 读者 会 发 现 , 相对 于 使 用 jQuery 来 编写 同样 的 功能 页 来 说 ， 
AngularJS 的 项 目 文件 结构 感 很 强 ， 模 块 之 间 的 职责 划分 很 明显 。 而 视图 页 也 不 会 充斥 太 多 的 
JavaScript 多 辑 ， 使 前 端 程序 员 东 拼 西 凑 完 成 功能 的 行为 有 所 收敛 。 这 些 都 是 AngularJS 框架 
哲学 带 来 的 效果 。 对 于 团队 型 的 项 目 开发 来 说 ，AngularJS 带 来 的 严谨 要 求 和 便利 性 是 值得 花 
时 间 学 习 尝试 的 。 
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了 .7 小 结 


本 章 的 内 容 是 后 面 学 习 Ionic 开发 的 重要 知识 基础 ， 毕 竟 Ionic 框架 的 大 量 代码 其 实质 都 
是 AngularJS 的 自 定义 组 件 。AngularJS 的 4 个 特点 是 由 本 章 介绍 的 模块 、 依 赖 注入 、 作 用 域 、 
控制 器 、 指 令 、 过 滤器 和 服务 这 些 组 件 或 开发 模式 所 紧密 结合 而 实现 的 。 为 了 让 读者 不 受 
AngularJS 陡峭 的 学 习 曲 线 影响 ， 本 章 最 后 给 出 的 项 目 示例 功能 很 简单 ， 但 是 已 经 基本 覆盖 了 
介绍 过 的 各 类 组 件 和 未 来 会 常用 的 AngularJS 内 置 服务 。 笔 者 建议 读者 自己 也 找 一 个 涉及 
CRUD 操作 的 前 台 页 面 应 用 场景 用 AngularJS 来 实现 或 者 给 3.6 节 的 示例 再 增加 完善 排序 、 动 
画 等 功能 ， 巩 固 在 本 章 学 到 的 知识 概念 。 
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第 4 瘟 


宁 4 时 
其 他 基础 知识 与 1onic 项 目 结构 


本 书 第 3 章 介绍 的 AngularJS 技术 是 一 个 结构 复杂 庞大 、 组 件 配合 紧密 的 框架 ， 熟 练 掌握 
了 AngularJS 就 已 经 基本 上 跨 过 了 Ionic 开发 的 门槛 ,不 过 除了 提供 AngularJS 功能 组 件 外 ,Ionic 
还 为 前 端 组 件 定制 了 美观 的 样式 ， 并 使 用 业内 流行 的 前 端 工具 整合 了 自动 化 的 项 目 开 发 工具 
链 。 

因此 在 全 面 介绍 Ionic 的 组 件 和 开发 前 , 安排 了 本 章 介 绍 掌 握 Ionic 开发 需要 了 解 的 SASS 
样式 开发 和 构建 工具 Gulp。 最 后 将 Ionic 项 目的 整体 目录 文件 结构 做 一 个 说 明 ， 这 样 读者 未 来 
在 需要 开发 或 是 阅读 调试 代码 时 , 就 知道 该 到 什么 位 置 去 查看 了 , 而 不 是 漫 无 目的 地 凭 直觉 上 时 
找 。 

章 的 主要 知识 点 包括 : 


本 
@ SASS 基础 知识 
@ lodash 库 简 单 说 明 

@ ”Gulp 原理 与 常用 模块 介绍 

@ Ionic 项目 模板 目录 结构 解析 


SASS 入 门 


SASS 是 一 种 对 CSS 进行 了 扩充 的 开发 工具 ， 它 提供 了 许多 便利 的 写法 ， 使 得 CSS 的 开 
发 变 得 简单 和 可 维护 ， 大 大 节省 了 样式 设计 者 尤其 是 有 编程 背景 的 样式 设计 者 的 时 间 。 符 合 
SASS 语法 的 文件 就 是 普通 的 文本 文件 , 里 面 可 以 直接 使 用 CSS 语法 。SASS 文件 后 缀 名 是 .scss， 
意思 为 Sassy CSS。 因 此 有 时 候 SASS 和 SCSS 两 个 词 是 可 以 混用 的 。 

Ionic 提供 的 样式 文件 就 是 基于 SASS 开发 的 。 考 虑 到 部 分 读者 从 未 接触 过 SASS， 本 书 将 
重点 介绍 Ionic 涉及 的 SASS 语法 ， 并 不 打算 变 成 一 个 完整 的 SASS 说 明文 档 。 有 通读 需要 的 
读者 可 以 到 SASS 的 官方 网 站 学 习 SASS 的 更 多 特性 和 样 例 : 
http://sass-lang.com/documentation/file.SASS_REFERENCE.html。 

编写 完成 的 SASS 文件 需要 经 过 编译 处 理 转换 成 浏览 器 可 以 识别 的 CSS 代码 , 在 Ionic 里 
有 本 章 4.3 节 介绍 的 Gulp 调用 相关 模块 完成 编译 。 在 开发 者 日 常 编写 调试 时 ， 可 以 使 用 一 
在 线 SASS 服务 网 站 (http://www.sassmeister.com/) 的 即时 编译 转换 功能 获得 CSS 代码 ， 如 诺 
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4.1 所 示 。 
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图 4.1 使 用 在 线 网 站 http://www.sassmeister.com/) 的 即时 编译 转换 功能 获得 CSS 代码 


4.1.1 变量 与 计算 
SASS 允许 定义 变量 ， 变 量 需要 冠 以 $ 前 级 ， 如 : 





经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 从 代码 上 看 似乎 使 用 SASS 变量 的 源 代码 更 长 , 但 是 有 了 变量 遇 到 以 后 的 调 

整 变化 时 ， 就 只 需要 在 变量 定义 的 地 方 变更 值 ， 而 不 用 通过 全 文 搜索 去 替换 。 相 信 有 过 网 站 维 

护 经 验 的 读者 能 够 体会 SASS 变量 的 好 处 .这 也 是 Ionic 在 定义 CSS 样式 类 使 用 的 最 常见 模式 。 
如 果 变 量 需 要 镶嵌 在 字符 串 之 中 ， 就 必须 需要 写 在 #{} 之 中 ， 如 : 
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经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 这 种 字符 串 蔡 换 经 常 被 使 用 在 组 合 型 的 CSS 属性 名 上 。 
SASS 允许 在 代码 中 使 用 计算 表达 式 ， 如 : 





经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 变 量 也 可 以 出 现在 计算 表达 式 中 ， 这 样 就 更 灵活 了 。 


4.1.2 样式 嵌 套 


标准 的 CSS 只 能 支持 单 层 的 选择 器 f 块 结构 , 对 于 习惯 了 JavaScript 开发 的 人 来 说 无 疑 是 
值得 改进 的 一 个 地 方 。 而 经 SASS 扩展 ， 可 以 允许 无 限 层 的 选择 器 柑 套 ， 如 : 
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经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 从 代码 可 以 看 到 ， 生 成 后 的 CSS 代码 是 松散 的 平面 结构 ， 而 SASS 的 代码 
明显 更 有 逻辑 性 。 
CSS 属性 名 也 可 以 嵌 套 生成 ， 如 : 





经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 从 代码 可 以 看 到 ， 在 border 和 border-left 后 分 别 加 上 冒号 后 ， 生 成 的 CSS 
会 使 用 -号 来 连接 生成 最 终 的 属性 名 。 
在 嵌 套 的 代码 块 内 ， 可 以 使 用 && 占 位 符 表示 引用 父 元 素 。 如 : 
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经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 从 本 示例 代码 的 里 可 以 看 出 使 用 SASS 的 深层 嵌 套 在 属性 较 多 时 有 可 能 可 以 
减少 编写 的 代码 量 ， 代 码 结构 也 更 具有 可 读 性 。 


4.1.3 单行 注释 // 
SASS 是 CSS 的 超 集 , 因此 标准 的 CSS 注释 /* comment */ ,会 保留 到 编译 后 生成 的 文件 。 
而 为 了 方便 开发 人 员 的 调试 ，SASS 支持 了 类 似 JavaScript 的 单行 注释 符 //， 如 : 





经 转换 后 的 CSS 代码 为 : 





【代码 解析 】 最 终 在 生成 的 CSS 代码 里 ， 标 准 的 CSS 注释 被 保留 ， 单 行 注释 符 // 被 忽略 
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省 去 ， 出 于 保护 目的 不 愿 把 内 部 注释 发 布 到 网 上 的 开发 者 也 可 以 考虑 使 用 这 个 方法 。 


4.1.4 继承 @extend 
SASS 允许 一 个 选择 器 继承 另 一 个 选择 器 ， 如 : 


经 转换 后 的 CSS 代码 为 : 


【代码 解析 这 里 可 以 看 到 SASS 跟 CSS 代码 相 比 的 好 处 是 既 通 过 @extend 继承 了 父 CSS 
类 的 样式 属性 ， 又 把 相关 的 声明 都 放 在 子 CSS 类 或 子 元 素 声 明 里 ， 这 样 的 代码 结构 可 阅读 可 
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维护 性 明显 更 佳 。 


性 元 此 处 的 通过 @extend 只 能 继承 CSS 类 ， 即 父 类 只 能 是 CSS 类 ， 而 不 能 是 元 素 。 


4.1.5 混入 @mixin 与 @include 
最 早 的 SASS 是 用 Ruby 开发 的 ， 因 此 该 语言 的 作者 引入 了 一 些 类 似 Ruby 的 语言 结构 ， 


其 中 就 有 用 于 实现 多 重 继承 的 混入 〈Mixin) 。 混 入 有 点 像 C 语言 的 宏 ， 是 可 以 定义 以 后 在 被 
引入 的 地 方 展开 而 达到 重用 的 代码 块 。 

首先 需要 使 用 @mixin 命令 ， 定 义 一 个 代码 块 ， 随 后 再 使 用 @include 命令 ,调用 这 个 混入 
代码 块 使 之 原 地 展开 ， 如 : 
经 转换 后 的 CSS 代码 为 : 


【代码 解析 】 如 代码 所 示 ， 混 入 定义 本 身 并 不 生成 CSS 代码 ， 它 类 似 于 静态 库 被 嵌入 ， 
当 一 个 元 素 或 者 CSS 类 引入 了 多 个 混入 代码 块 ， 则 就 相当 于 实现 了 多 重 继承 的 概念 了 。 








[全 用 此 处 支 是 Sborder-width 的 定义 位 置 需 要 在 名 为 left-setting 的 混入 之 前 ， 否 则 将 无 法 获取 该 
变量 的 值 。 这 种 要 求 是 SASS 编译 器 本 身 的 限制 导致 的 。 





混入 还 可 以 指定 参数 和 默认 值 ， 既 像 C 语言 的 宏 又 强 于 它 ， 
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经 转换 后 的 CSS 代码 为 : 


【代码 解析 】 如 代码 所 示 ， 生 成 的 第 一 个 元 素 在 引入 时 使 用 了 默认 参数 值 , 而 第 二 个 在 引 
入 时 使 用 了 指定 参数 值 。 

Ionic 的 SASS 代码 里 大 量 使 用 了 混入 结构 ， 其 中 就 有 一 个 文件 ， 路 径 为 \ 项 目 目录 
\www\lib\ionic\scss\_mixins.scss, 文件 内 容 为 定义 的 所 有 的 混入 ， 以 下 为 其 中 一 小 段 代码 片段 : 




















其 他 基础 知识 与 lonic 项 目 结构 


























【代码 解析 这样 为 针对 两 种 不 同 的 浏览 器 分 别 定义 元 素 的 四 个 角 的 圆 角 半径 提供 了 简单 
的 方式 。 
4.1.6 颜色 计算 


SASS 提供 了 一 些 内置 的 颜色 函数 ， 以 便 通 过 种 子 颜色 生成 系列 颜色 ， 这 样 能 够 节省 大 量 
的 自行 计算 和 查找 调 色 板 的 时 间 ， 常 见 的 颜色 函数 与 使 用 方式 如 下 所 示 。 


经 转换 后 的 CSS 代码 为 : 
ae 
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【代码 解析 】 在 SASS 代码 里 的 相关 位 置 已 经 对 使 用 到 的 函数 进行 过 了 注释 , 这 里 不 再 重 
复 说 明 。 当 需要 对 Ionic 提供 的 默认 颜色 方案 进行 微调 或 是 设计 自己 的 APP 应 用 的 颜色 方案 时 ， 
读者 可 以 考虑 使 用 这 些 便捷 函数 。 


4.1.7 引入 文件 @import 


@import 命令 ， 用 来 插入 外 部 SASS 文件 。Ionic 代码 库 中 路 径 为 \ 项 目 目录 
\www\lib\ionic\scss\ionic.scss 的 文件 的 主要 内 容 就 是 用 于 引入 其 他 SASS 模块 文件 ， 如 : 
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【代码 解析 】 请 注意 代码 中 引入 文件 名 的 区 别 ， 当 SASS 文件 以 为 前 级 开头 时 ， 使 用 
@import 命令 不 需要 写 出 这 个 前缀 和 .scss 的 后 级 。 


4.1.8 条 件 语句 @if 和 @else 


条 件 语 句 是 一 般 编 程 语言 的 基本 设施 ，SASS 有 两 个 配套 的 @if 和 @else 可 以 使 用 。Ionic 
代码 库 中 路 径 为 \ 项 目 目录 \www\lib\ionic\scss\ mixins.scss 的 文件 里 也 有 多 处 用 到 了 条 件 语句 ， 
如 以 下 片段 : 





【代码 解析 】 由 于 正 浏览 器 的 flex-wrap 属性 值 与 其 他 浏览 器 不 一 样 ， 因 此 代码 里 通过 条 
件 语句 进行 了 额外 判断 。 


4.2 lodash ( 可 选 学 ) 


lodash 是 一 套 JavaScript 工具 库 ， 它 内 部 封装 了 诸多 对 字符 串 、 数 组 、 对 象 等 常见 数据 类 
型 的 处 理 函 数 , 在 本 书 的 3.6 节 的 示例 3-10 已 经 使 用 了 它 的 数组 处 理 函 数 。 目 前 每 天 使 用 npm 
安装 lodash 的 数量 在 百 万 级 以 上 ， 这 在 一 定 程度 上 证 明了 其 代码 的 普 世 性 ， 笔 者 推荐 读者 在 
自己 的 项 目 中 选择 使 用 。 本 书 13 和 14 章 的 项 目 实战 中 ， 也 会 大 量 运 用 到 lodash 的 多 个 辅助 
函数 。 


4.2.1 使 用 场景 
lodash 库 提供 的 辅助 函数 主要 分 为 以 下 几 类 : 
@ Array: 适用 于 数组 类 型 ， 比 如 填充 数据 、 查 找 元 素 、 数 组 分 片 等 操作 。 
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Collection: 适用 于 数组 和 对 象 类 型 ， 部 分 适用 于 字符 串 ， 比 如 分 组 、 查 找 、 过 滤 等 
操作 。 

Function: 适用 于 函数 类 型 ， 比 如 节 流 、 延 迟 、 缓 存 、 设 置 钩子 等 操作 。 

Lang: 普遍 适用 于 各 种 类 型 ， 常 用 于 执行 类 型 判断 和 类 型 转换 。 

Math: 适用 于 数值 类 型 ， 常 用 于 执行 数学 运算 。 

Number: 适用 于 生成 随机 数 ， 比 较 数值 与 数值 区 间 的 关系 。 

Object: 适用 于 对 象 类 型 ， 常 用 于 对 象 的 创建 、 扩 展 、 类 型 转换 、 检 索 、 集 合 等 操作 。 
Seq: 常用 于 创建 链 式 调用 ， 提 高 执行 性 能 (惰性 计算 ) 。 

String: 适用 于 字符 串 类 型 。 

Util: 提供 了 杂 类 辅助 函数 。 

由 于 lodash 库 提供 的 辅助 函数 数量 众多 ， 而 本 书 的 主 则 是 关于 Ionic 框架 的 开发 ， 因 此 不 


再 一 一 深入 介绍 了 。 笔 者 将 会 在 后 续 第 14 章 和 第 15 章 中 的 项 目 实战 代码 里 解说 用 到 的 相关 
lodash 库 函 数 。 


4.2.2 引入 到 项 目 


尽管 lodash 库 在 有 数据 处 理 需 求 的 前 端 开 发 中 已 属 标 配 ， 但 Ionic 框架 并 没有 包含 它 。 
此 读者 如 果 需 要 在 自己 的 项 目 或 产品 中 使 用 , 必须 自行 引入 。 如 果 仅 在 JavaScript 文件 中 使 用 ， 
可 以 采用 类 似 本 书 3.6 节 中 示例 3-10 的 简单 做 法 , 包含 lodash 的 JavaScript 文件 后 使 用 全 局 变 
量 来 获取 它 即 可 。 

然而 如 果 需 要 在 HTML 视图 页 的 AngularJS 表达 式 中 使 用 lodash 库 ， 则 有 可 能 因为 作用 
域 对 象 的 解析 不 包括 全 局 变量 而 无 法 使 用 。 有 一 个 解决 办 法 是 在 主 应 用 模块 的 run 方法 代码 块 
里 设置 lodash 库 根 对 象 到 根 作用 域 里 ， 这 样 HTML 视图 页 里 就 也 能 使 用 了 lodash 库 了 ， 如 : 


【示例 4-1】 设置 lodash 库 根 对 象 到 AngularJS 应 用 的 根 作用 域 。 





【代码 解析 】 代 码 里 的 run 方法 将 在 AngularJS 应 用 启动 时 被 调用 ， 因 此 随后 所 有 的 作用 
域 对 象 就 都 能 通过 继承 链 使 用 它 了 。 



































在 页 面包 含 lodash 库 文件 时 ， 需 要 把 包含 代码 放置 在 应 用 本 身 的 JavaScript 文件 前 面 ， 可 





参见 示例 3-10 的 做 法 。 


4.2.3 进一步 学 习 指南 
lodash 库 功能 强劲 ， 而 且 效 率 很 好 ， 比 较 适 合 移动 开发 这 种 前 台 响 应 要 求 高 的 场景 。 在 此 
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推荐 读者 可 以 到 其 官方 网 站 https://lodash.com/docs 多 学 习 了 解 其 提供 的 函数 , 以 节省 开发 时 间 
和 减少 自 编 代码 中 错误 产生 的 几率 。 


4 .了 Gulp 使 用 简介 ( 可 选 学 ) 


在 本 书 的 2.1.3 节 已 经 介绍 过 Gulp 的 长 处 和 安装 步骤 ， 本 节 将 介绍 Gulp 的 一 些 基本 概念 
和 最 常见 的 使 用 方法 , 帮助 读者 未 来 选用 它 的 一 些 自动 化 处 理 插件 和 对 Ionic 默认 生成 的 Gulp 
主 文件 进行 定制 。 图 4.2 中 展现 了 最 常用 的 几 个 Gulp 插件 和 其 对 应 的 功能 。 





图 4.2 常见 的 Gulp 插件 和 其 对 应 的 功能 


4.3.1 Gulp 主 文件 gulpfile.js 的 执行 原理 


Gulp 需要 一 个 文件 作为 它 的 主 文件 ， 这 个 文件 被 强制 规定 名 称 为 gulpfilejs。 要 使 用 Gulp 
的 时 候 ， 在 项 目的 根 目 录 中 新 建 一 个 文件 名 为 gulpfilejs 的 文件 即 可 。 之 后 要 做 的 就 是 在 
gulpfilejs 文件 中 定义 任务 了 。 示 例 4-2 是 一 个 最 简单 的 gulpfilejs 文件 内 容 示例 ， 它 定义 了 一 
个 默认 的 任务 。 


【示例 4-2】 在 gulpfilejs 中 定义 一 个 默认 任务 。 





【代码 解析 】 代 码 引 入 gulp 模块 后 使 用 它 的 task() 方 法 定义 了 名 为 default 的 默认 任务 ， 
该 任务 被 调用 执行 时 将 在 控制 台 写 入 字符 串 “hello” 后 退出 。 
运行 Gulp 任务 只 需 切 换 到 存放 gulpfilejs 文件 的 目录 ， 然 后 在 命令 行 中 执行 gulp 命令 就 
行 了 。gulp 后 面 可 以 加 上 要 执行 的 任务 名 ， 例 如 gulp task1， 如 果 没 有 指定 任务 名 ， 则 会 执行 
名 为 default 的 默认 任务 。 图 4.3 为 分 别 使 用 两 种 方式 执行 示例 4-2 中 编写 的 gulpfilejs 运行 出 
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的 结果 。 





图 4.3 在 命令 行 执行 4-2 中 编写 的 gulpfilejs 运行 出 的 结果 


在 介绍 Gulp 的 其 他 函数 之 前 ,需要 先 了 解 gulpfilejs 工 作 方 式 。 在 Gulp 中 , 使 用 的 是 Nodejs 
中 的 流 (stream) ， 首 先 获取 到 需要 的 流 ， 然 后 可 以 通过 流 的 pipe() 方 法 把 流 依次 导入 到 各 个 
Gnulp 插件 中 , 一 般 最 后 是 把 流 写 入 到 文件 里 结束 。 所 以 可 以 把 Gulp 看 作 是 一 个 流 处 理 器 工具 ， 
这 样 它 在 中 间 的 处 理 环节 不 需要 频繁 地 生成 临时 文件 〈 比 Gulp 更 早出 现 的 同类 工具 Grunt 是 
以 临时 文件 方式 工作 的 ) ， 效 率 要 更 高 。 

这 样 可 以 推 想 出 来 , Gulp 的 模式 一 般 应 该 是 : 首先 获取 到 想 要 处 理 的 文件 流 (通过 gulp.src 
方法 ), 然后 把 文件 流 依次 导入 到 Gulp 的 各 个 插件 中 (通过 pipe 方法 依次 包装 各 个 插件 方法 )， 
最 后 把 经 过 插件 处 理 后 的 流 再 写 入 到 文件 里 (也 是 通过 pipe 方法 包装 gulp.dest，gulp.dest 方法 
则 把 流 中 的 内 容 写 入 到 文件 中 ) 。 如 果 省 去 中 间 各 个 插件 环节 ， 那 么 最 简单 的 一 个 gulpfilejs 
就 写 出 来 了 : 

【示例 4-3】 在 gulpfilejs 中 使 用 流 方式 执行 复制 文本 文件 的 操作 。 
Var gulp = require("gulp") 7 
gulp.task('default', function(){ 

gulpusrct"* txt) 

.pipe (gulp.dest ('test gulp')); 

Ds; 

【代码 解析 】 在 【示例 4-2】 的 结构 里 加 入 了 获取 gulpfilejs 当前 目录 的 所 有 .txt 文件 ， 随 
后 写 入 到 目录 底下 的 test_gulp 目录 中 。 

了 解 了 Gulp 的 工作 原理 和 代码 编写 结构 后 , 下 面 的 内 容 将 继续 讲解 Gulp 的 四 个 基本 API 

接口 : gulp.src、gulp.task、gulp.dest 和 gulp.watch。 

















4.3.2 ”获取 流 函 数 src 
gulp.src() 方 法 正 是 用 来 获取 流 的 ,但 要 注意 这 个 流 里 的 内 容 不 是 原始 的 文件 流 ， 而 是 一 个 
虚拟 文件 对 象 流 (Vinyl files)， 这 个 虚拟 文件 对 象 流 中 存储 着 原始 文件 的 路 径 、 文 件 名 、 内 容 等 








90 


第 4 章 ”其 他 基础 知识 与 lonic 项 目 结构 





信息 。 其 语法 为 : 
gp.src(glops [, options); 
1 . globs 参数 
globs 参数 是 文件 匹配 模式 (类 似 正则 表达 式 ) ， 用 来 匹配 文件 路 径 〈 包 括 文件 名 ) ， 当 
然 这 里 也 可 以 直接 指定 某 个 具体 的 文件 路 径 。 当 有 多 个 匹配 模式 时 ， 该 参数 可 以 为 一 个 数组 : 
类 型 为 String 或 Array。 例 如 : 


2 . options 参数 
options 参数 是 可 选 参数 对 象 ， 以 下 为 常见 选项 参数 : 
® options.buffer 


类 型 Boolean 默认 值 : true 
说 明 : 设置 为 false 时 将 返回 file.content 的 流 而 不 缓冲 整个 文件 的 内 容 ， 处 理 大 文件 时 非 
常 有 用 。 


趣 插件 可 能 并 不 会 实现 对 流 的 支持 。 


® options.base 


类 型 ， String 
说 明 : 显 式 设置 输出 路 径 以 某 个 路 径 的 某 个 组 成 部 分 为 基础 向 后 拼接 。 
假设 在 一 个 路 径 为 clientjs/somedir 的 目录 中 ， 有 一 个 文件 叫 somefilejs : 





【代码 解析 】 在 路 径 中 的 ** 代 表 匹 配 路 径 中 的 0 个 或 多 个 目录 及 其 子 目 录 。 使 用 
options.base 就 能 够 选择 保留 原 路 径 里 的 一 些 下 层 目录 结构 。 


4.3.3” 写 文件 函数 dest 
gulp.dest() 方 法 是 用 来 写 入 文件 或 目录 的 ， 其 语法 为 : 
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gulpdest(path [optionsD); 
1 . path 参数 
path 参数 是 写 入 文件 或 目录 的 路 径 ; 
2 . options 参数 
options 参数 是 可 选 参数 对 象 ， 以 下 为 常见 选项 参数 : 


® options.cwd 

类 型 : String ”默认 值 : process.cwd() 

说 明 : 输出 目录 的 cwd (current working directory 当前 工作 目录 ) 参数 ， 只 在 所 给 的 输出 
目录 是 相对 路 径 时 有 效 。 


® options.mode 


类 型 : String ”默认 值 : 0777 

说 明 : 八进制 权限 字符 ， 用 以 定义 所 有 在 输出 目录 中 所 创建 的 目录 的 权限 。 

这 里 说 明 一 下 生成 的 文件 路 径 与 给 gulp.dest0 方 法 传 入 的 路 径 参 数 之 间 的 关系 。 
gulp.dest(path) 生 成 的 文件 路 径 是 传 入 的 path 参数 后 面 再 加 上 前 面 调用 gulp.src0 中 有 通配符 开 
始 出 现 的 那 部 分 路 径 。 例 如 : 





【代码 解析 】 通 过 这 种 在 写 入 路 径 中 保留 通配符 所 匹配 出 的 路 径 的 方式 , 能 保留 源 目录 的 
结构 。 








岛 元 | 用 gulp.destO 把 文件 流 写 入 文件 后 , 文件 流 仍然 可 以 继续 使 用 。 在 后 面 的 4.3.6 节 我 们 可 以 






看 到 Ionic 的 gulpfilejs 利用 这 一 特性 同时 生成 了 正常 可 读 的 和 压缩 优化 过 的 CSS 文件 。 


4.3.4 监视 文件 变化 函数 watch 


gulp.watchO) 用 来 监视 文件 的 变化 ， 当 文件 发 生变 化 后 ， 我 们 可 以 利用 它 来 执行 相应 的 任 
务 ， 例 如 文件 重新 压缩 生成 等 。 其 语法 为 : 


gulp-watch(globf，optsl， tasks); 
1 . globs 参数 
globs 参数 为 要 监视 的 文件 匹配 模式 ， 规 则 和 用 法 与 4.3.2 节 里 gulp.src() 方 法 中 的 glob 相 
同 。 
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2 . opts 参数 
opts 参数 为 一 个 可 选 的 配置 对 象 ， 通 常 不 需要 用 到 。 
3 . tasks 参数 


tasks 参数 为 监视 到 文件 变化 后 要 执行 的 任务 名 数组 。 
例如 : 





【代码 解析 】 在 监测 到 工作 目录 的 js 子 目录 及 以 下 的 任何 js 文件 有 变动 时 ， 则 依次 调用 
前 面 定义 过 的 uglify 和 reload 任务 。 


4.3.5 ”定义 任务 函数 task 
gulp.task(O) 用 来 定义 任务 ， 在 前 面 几 个 小 节 读 者 应 该 已 经 初步 接触 过 它 了 。 其 语法 为 : 
gulptasklnanel, depsl fn) 
1 . name 参数 
name 代表 任务 名 。 
2 . deps 参数 


deps 参数 是 当前 定义 的 任务 需要 依赖 的 其 他 任务 名 数组 。 当 前 定义 的 任务 会 在 所 有 依赖 
的 任务 执行 完毕 后 才 开始 执行 。 如 果 没 有 依赖 ， 则 可 省 略 这 个 参数 。 


3 . fn 参数 


血 参数 是 任务 函数 ， 我 们 把 任务 要 执行 的 代码 都 写 在 里 面 ， 该 参数 也 是 可 选 的 。 

前 面 在 4.3.1 节 和 4.3.4 节 已 经 分 别 了 解 了 如 何 定义 默认 执行 的 任务 和 简单 的 任务 ,现在 介 
绍 当 有 多 个 任务 时 ， 需 要 知道 怎么 通过 任务 依赖 来 实现 控制 任务 的 执行 顺序 。 例 如 想 要 执行 
one,two,three 这 三 个 任务 ,就 可 以 定义 一 个 空 的 任务 ,然后 把 那 三 个 任务 当 作 这 个 空 的 任务 的 
依赖 就 行 了 : 


【代码 解析 】 如 果 任 务 ['one','two','three1] 相 互 之 间 没 有 依赖 ， 任 务 就 会 按 书写 的 顺序 来 执 
行 ， 如 果 有 依赖 的 话 则 会 先 执行 依赖 的 任务 。 
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4.3.6 解析 lonic 项 目 Gulp 主 文件 


了 解 完 Gulp 提供 的 4 个 基础 API 接口 后 ， 就 可 以 开始 通过 阅读 已 有 成 熟 代 码 学 习 怎 么 把 
Gulp 应 用 到 日 常 工作 中 了 。 从 本 书 的 主旨 出 发 ， 笔 者 做 出 了 一 个 轻松 的 决定 : 通过 解析 Ionic 
项 目 模板 自 带 的 Gulp 主 文件 来 讲解 Gulp 的 API 和 一 些 插件 的 使 用 。 

读者 可 以 打开 在 本 书 前 面 的 2.1.6 节 生 成 的 Hello Ionic 项 目 目录 下 的 gulpfilejs 文件 自行 
查看 阅读 或 是 参考 示例 4-4 的 代码 与 注释 来 学 习 。 





【示例 4-4】Ionic 项 目 模板 自 带 的 Gulp 主 文件 gulpfilejs 
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【代码 解析 】 代 码 里 最 主要 的 是 两 个 任务 : sass 和 watch。sass 作为 主任 务 负责 生成 css 
文件 ， 而 watch 任务 将 被 Ionic CLI 调用 监控 项 目 sass 文件 的 变化 ， 一 旦 变化 则 将 在 css 文件 
更 新 后 调用 浏览 器 的 远程 函数 重新 加 载 应 用 。 


4 .A Ionic 项 目 模板 目录 结构 简介 


使 用 Ionic CLI 的 命令 创建 完 一 个 项 目 并 加 入 Android 或 iOS (开发 机 需要 是 OSX 操作 系 
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统 ) 运行 平台 的 支持 后 ， 项 目的 目录 与 文件 结构 如 图 4.4 所 示 。 








名 称 ”了 次 E 
hooks 文件 去 
node_modules 


文件 夫 
Visual Studio Co.. 
Visual Studio Co.. 
文本 文档 
JSON File 
图 configxml XML 文 术 
图 gulpflejs JScript Script 文件 
[DL ionic.project PROJECT 文 件 
TT packagejson JSON File 





图 4.4 Ionic 项 目 模板 项 层 目录 与 文件 结构 


本 节 将 介绍 重要 的 目录 与 配置 文件 ， 了 解 这 些 对 于 未 来 的 问题 定位 与 应 用 定制 是 有 助 益 


的 。 


4.4.1 


常用 工作 目录 www 


www 目录 将 是 开发 人 员 最 常 访问 的 地 方 ， 开 发 出 的 代码 基本 都 归 类 放 在 相应 的 字母 下 。 
图 4.5 中 显示 了 初始 状态 下 www 目录 的 结构 。 





图 4.5 www 目录 的 结构 


相信 读者 根据 名 称 不 难 想 到 : 


4.4.2 


css、img 和 js 目录 分 别 放 置 开发 人 员 自 行 开发 的 代码 或 图 片 资 源 。 

index.html 是 默认 的 应 用 的 主页 面 文件 ,由 于 Ionic APP 应 用 的 实质 是 一 个 SPA( Single 
Page Application 单 页 面 应 用 ) ， 因 此 该 文件 将 在 运行 时 一 直 加 载 在 浏览 器 中 ， 而 随 
着 代码 的 运行 (通过 第 8 章 介绍 的 导航 类 组 件 ) 变更 其 局 部 的 展现 。 

lib 目录 主要 放置 存放 Ionic 框架 的 源 代码 、 图 标 字体 文件 和 使 用 的 AngularJS 框架 的 
代码 。 


常用 工作 目录 scss 


在 项 目 启用 了 SASS 后 ，scss 目录 下 将 会 存在 一 个 ionic.app.scss 文件 。 开发 人 员 可 以 在 这 
个 文件 上 更 改 Ionic 默认 设置 的 一 些 变量 的 值 ， 该 文件 的 头 部 已 有 注释 文本 举例 该 如 何 更 改 。 
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读者 可 以 结合 在 4.1 节 了 解 的 SASS 知识 和 /lib/ionic/scss 目录 下 的 Ionic 原始 SASS 文件 来 定制 
自己 的 APP 应 用 的 外 观 。 














4.4.3 常用 工作 目录 resources 


resources 目录 主要 用 于 存放 APP 应 用 在 Android 和 iOS 平台 的 桌面 图 标 和 应 用 启动 闪 屏 
使 用 的 图 片 文件 。 使 用 自己 的 资源 覆盖 这 些 文 件 是 定制 发 布 APP 前 必须 要 做 的 界面 完善 工作 ， 
- 般 来 说 这 些 图 片 文件 是 使 用 Photoshop 来 制作 生成 的 。 本 书后 面 的 13.3.9 节 里 用 实例 介绍 了 
实战 项 目 中 如 何 定制 APP 的 图 标 和 应 用 启动 屏 图 片 文件 。 






































4.4.4 重要 文件 package.json 

通过 文本 编辑 器 打开 package.json 可 以 看 到 APP 应 用 的 相关 信息 、 依 赖 的 Gulp 插件 和 其 
他 NPM 开发 包 都 设置 在 里 面 。 此 外 还 列举 出 了 随 应 用 模板 安装 的 Cordova 插件 集 和 支持 的 硬 
件 平台 ， 如 图 4.6 所 示 。 


packagejson Xx 


1 





图 4.6 ”package.jjson 的 初始 结构 


4.4.5 重要 文件 config.xml 
config.xml 是 存放 与 APP 应 用 发 布 相关 的 主要 信息 的 配置 文件 。 因为 XML 文件 的 自 描述 
性 ， 相 信 读 者 阅读 每 项 的 内 容 就 能 知道 对 应 的 配置 项 意义 ， 也 可 以 到 cordova 的 官方 网 站 
(http://cordova.apache.org/docs/en/latest/config ref/index.html) 阅读 更 全 面 的 说 明 。 开 发 人 员 可 
以 在 发 布 测试 时 尝试 调整 里 面 的 一 些 配置 值 , 如 SplashScreenDelay、FadeSplashScreenDuration。 
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笔者 建议 调整 其 他 开关 值 前 在 网 上 先 搜 索 一 下 这 些 配置 项 对 应 的 含义 , 以免 产 生意 想不到 的 错 


琴 。 


4.4.6 


其 他 目录 与 文件 简介 


hooks 目录 ， 放 置 安装 的 Cordova 插件 可 能 需要 额外 执行 的 脚本 文件 ，Ionic CLI 会 负 
责 调 用 。 

node modules 目录 ， 存 放 项 目 用 到 的 Nodejs 插件 模块 。 

plugins 目录 ，Cordova 插件 的 安装 目录 ， 相 关 知 识 请 完整 参考 本 书 第 11 章 。 
gulpfilejs 文件 ， 项 目的 Gulp 主 文件 ， 已 在 本 书 的 4.3.6 节 介绍 过 。 


4.5 小 结 


本 章 介 绍 掌 握 Ionic 开发 需要 了 解 的 SASS 样式 开发 和 构建 工具 Gulp， 并 对 Ionic 模板 项 
目的 Gulp 主 文件 做 了 完整 的 解析 ， 最 后 将 Ionic 项 目的 整体 目录 文件 结构 做 了 说 明 。 从 此 开 
始 ， 就 要 进入 Ionic 的 框架 代码 学 习 了 。 
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在 第 3 章 读者 已 经 了 解 了 AngularJS 的 相关 基本 概念 和 使 用 方式 , 它 需 要 一 定时 间 学 习 上 
手 和 反复 练习 才能 做 到 有 效 掌握 。 笔 者 在 第 6 章 将 开始 介绍 的 Ionic 内 置 指令 与 服务 组 件 全 面 
使 用 了 AngularJS 进行 封装 ,在 初始 化 和 执行 效率 上 会 比 自行 编写 纯 CSS 与 JavaScript 事件 处 
理 脚 本 有 一 定 的 性 能 损失 。 因 此 对 于 静态 的 局 部 控件 或 是 布局 简单 的 页 面 ， 可 以 选择 只 使 用 
Ionic 的 CSS 样式 文件 的 方式 进行 泻 染 。 

本 章 将 介绍 不 使 用 Ionic 内 置 指令 组 件 的 条 件 下 只 依赖 Ionic 的 内 置 CSS 样式 文件 进行 页 
面 布局 和 开发 。 在 某 些 页 面 出 现 性 能 问题 的 时 候 , 本 章 介绍 的 开发 方式 或 许 也 能 成 为 考虑 优化 
的 方向 之 一 ,此 外 最 重要 的 一 点 是 ,后 面 要 学 习 和 使 用 的 Ionic 内 置 指令 几乎 都 是 要 和 这 些 CSS 
样式 配合 使 用 的 ， 所 以 本 章 的 内 容 是 后 面 章 节 的 前 导 知 识 准 备 。 
































本 章 主要 涉及 的 知识 点 有 : 
@ Ionic 提供 的 常见 APP 界面 组 件 集 样式 : 从 整体 栅 格 布局 对 齐 到 HTML 组件 的 界面 定 
制 组 合 。 


@ ”如 何 自 定义 界面 : 通过 修改 SCSS 文件 的 变量 定义 来 改变 从 默认 颜色 到 边 距 值 等 。 

@ 内 置 图 标 集 的 使 用 : 查找 并 在 合适 的 位 置 为 HTML 组 件 添加 图 标 。 

学 习 完 本 章 的 内 容 后 , 将 能 利用 Ionic 提供 的 各 类 布局 与 功能 类 CSS 组 件 ， 快 速 完成 类 似 
图 5.1 携程 首页 布局 的 设计 ， 这 也 将 是 本 章 最 后 一 节 作为 知识 巩固 项 目的 内 容 。 





标题 中 的 表单 输入 控 








图 5.1 携程 首页 布局 
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为 了 方便 单独 说 明 本 章 的 内 容 , 本 章 的 组 件 事件 处 理 尽 量 使 用 JQuery 等 JavaScript 库 , 除 


一 


了 在 章节 中 特别 指出 的 地 方 ,否则 将 不 使 用 AngularJS 框架 和 Ionic 的 JavaScript 组 件 。 这 
在 实际 项 目 中 未 必 是 最 合理 的 做 法 ， 读 者 可 以 根据 工作 需要 自行 判定 采用 合适 的 方案 。 











栅 格 布局 解析 


栅 格 系统 Grid System) ， 其 背后 思想 是 运用 格子 设计 版 面 布局 ， 已 从 出 版 物 设计 风行 


到 


网 页 设计 领域 。 目 前 在 PC 端 网 页 开发 中 流行 的 Bootstrap 与 Blueprint 前 端 开 发 框架 ， 就 都 


提供 了 内 置 的 栅 格 系统 .而 目前 国内 外 业务 规模 大 的 网 站 出 于 方便 团队 成 员 将 页 面 整 体 区 域 切 


分 后 分 工 协作 的 考虑 ， 基 本 都 会 一 定 程度 接受 和 采用 栅 格 系统 布局 的 理念 。 
宝 网 首页 就 做 了 垂直 方向 上 的 栅 格 切 分 , 在 一 定 的 设备 宽度 尺寸 范围 下 , 淘 
固定 为 1140 像素 。 








人 


如 图 5.2 显示 的 淘 
宝 网 有 效 显示 区 域 





一 
1 淘宝 网 | 


| Taobao.com | 


Pr 


TE "Er 
天 orm 网 时 站 和 whew [da 














T 
510px 1 











150px 1 
图 5.2 淘宝 网 的 垂直 栅 格 切 分 
因为 Ionic 定位 于 面向 移动 设备 开发 优先 ， 其 栅 格 系统 采用 的 响应 式 布局 与 大 部 分 的 前 端 

















框架 默认 采用 的 针对 PC 端 网 页 特点 
CSS 3 的 弹性 盒 ( 英 文 简称 为 Flex ) 布局 的 , 简单 来 说 就 是 不 预 设 显示 














固定 横向 总 像素 数 有 较 大 区 别 : Ionic 的 栅 格 系统 是 基于 
区 域 横 轴 上 的 总 像素 数 。 





Flex 布局 主要 思想 是 让 容器 有 能 力 改变 其 子 元 素 的 宽度 、 高 度 、 各 方向 上 相对 先后 顺序 
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以 及 对 容器 剩余 空间 的 分 享 份额 ， 从 而 以 最 佳 方式 填充 可 用 空间 。 它 带 来 的 好 处 是 现在 编写 
的 布局 能 够 适应 所 有 类 型 的 显示 设备 和 屏幕 大 小 ,哪怕 需要 支持 的 未 来 设备 的 屏幕 大 小 目前 无 
法 确定 。 
Ionic 的 栅 格 系统 主要 使 用 两 个 CSS 类 系列 分 别 指定 布局 中 的 行 与 列 排列 方式 : 
@ IOW*: 在 容器 元 素 上 使 用 Tow 类 及 以 Iow 为 前 级 的 纵向 布局 细 调 类 ， 表 示 将 该 元 素 
设置 为 弹性 侈 (Flexible Box) ， 放 置 在 其 里 面 的 子 元 素 将 遵守 Flex 布局 。 
@ .col*: 在 子 元 素 上 使 用 .col 类 及 以 .col 为 前 级 的 横向 布局 细 调 类 。 


5.1.1 基本 行 与 列 CSS 类 


Ionic 栅 格 系统 的 基本 布局 功能 由 行 与 列 两 个 方向 上 的 基本 CSS 类 .row 和 .col 构成 : 


@ ”IOwW: 在 容器 元 素 上 使 用 Tow 类 ， 表 示 将 其 设置 为 弹性 使。 
@ .col: 在 容器 元 素 的 所 有 子 元 素 上 使 用 .col 类 ， 这 些 子 元 素 将 平分 容器 的 宽度 。 


【示例 5-1】.row 和 .col 在 页 面 布局 中 的 使 用 : 
www\5.1.1.html 





【代码 解析 ] 通 过 在 Chrome 的 调试 工具 里 切换 模拟 不 同 设备 的 显示 (参见 图 5.3~ 图 5.5)， 
可 以 看 到 每 行 的 各 列 自动 处 理 为 等 宽 模式 。 在 此 示例 的 基础 上 改造 实现 类 似 图 片 库 浏览 或 热门 
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城市 选择 列表 的 界面 非常 容易 。 
上 面 示例 代码 在 三 种 不 同 设备 的 模拟 显示 效果 分 别 为 : 





基本 行 与 列 CSS 类 
第 1 行 第 154 第 干 算 25 
第 2 行 第 1 列 第 2 第 2 列 第 2 和 第 3 列 


自重 第 ! 列 第 洗 第 2 列 第 3 行 第 3 第 3 第 4 





图 5.3 宽度 为 800 像素 的 自 定义 设备 模拟 显示 


基本 行 与 列 CSS 类 基本 行 与 列 CSS 类 
第 1 行 第 1 列 第 1 行 第 2 列 


第 2 行 第 ] 列 。 第 2 行 第 2 列 第 2 行 第 3 列 


第 ] 行 第 1 列 第 1 行 第 2 列 


第 2 和 第 1 列 第 2 行 第 2 列 第 2 第 3 列 
-一 -一 一 一 第 第 1 ”第 光 第 2 ”第 3 行 第 3 。 第 3 行 第 4 
第 3 行 第 ! 列 ”第 3 行 第 2 列 。 第 3 行 第 3 列 。 第 3 行 第 4 列 列 列 列 列 





图 5.4 iPhone 6 的 模拟 显示 图 5.5 iPhone4 的 模拟 显示 


5.1.2 ”指定 列 宽 比例 与 自 定义 
Ionic 也 提供 了 以 下 预 置 的 CSS 类 ， 可 用 于 显 式 地 指定 某 些 列 的 宽度 : 


@ .col-10: 占据 容器 10% 宽 度 
@ .col-20: 占据 容器 20% 宽 度 
@ .col-25: 占据 容器 25% 宽 度 
@ .col-33: 占据 容器 1/3 宽度 
@ .col-34: 占据 容器 1/3 宽度 
@ .col-50: 占据 容器 50% 宽 度 
@ .col-66: 占据 容器 2/3 宽度 
@ .col-67: 占据 容器 2/3 宽度 
@ .col-75: 占据 容器 75% 宽 度 
@ .col-80: 占据 容器 80% 宽 度 
@ .col-90: 占据 容器 90% 宽 度 


如 果 读 者 因为 实际 工作 ， 需 要 指定 特定 比例 的 宽度 ， 可 以 通过 在 scss 目录 下 的 
ionic.app.scss 文件 中 增加 相应 的 CSS 类 定义 。 下 面 的 代码 示例 说 明了 使 用 预 置 的 列 宽度 比例 
CSS 类 与 自 定 义 的 方式 。 

【示例 5-2】 演示 了 自 定义 特定 宽度 比例 CSS 类 的 代码 片段 


scss\ionic.app.scss 
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【代码 解析 】 通 过 同时 定制 占 行 宽 比 例 为 黄金 分 割 比 的 两 个 列 比 例 〈 分 别 为 61.8% 
和 38.2%) ， 就 能 在 示例 5-3 里 使 用 了 。 这 种 定制 方式 参考 于 Ionic 的 库 代 码 _grid.scss 
实现 。 





了 昌国。 此 处 的 sess 文件 需要 在 项 目 工程 的 根 目 录 下 成 功 执行 命令 ionic setup sass 完成 sass 的 配置 
后 才 会 由 Ionic 的 CLI 生成 。 





【示例 5-3】 演 示 了 指定 列 宽 比 例 CSS 类 在 页 面 布局 中 的 使 用 
www\5.1.2.html 
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【代码 解析 】 本 代码 段 分 别 使 用 最 普通 的 比例 、 特 殊 比 例 、 混 入 未 设置 比例 、 自 定义 比例 、 
总 比例 不 等 于 100% 以 及 容器 嵌 套 后 在 内 部 设置 比例 来 达成 布局 的 不 同 效果 。 本 章 前 面 展示 的 
5.1 携程 首页 布局 里 的 内 容 区 域 栅 格 实现 就 可 以 运用 这 里 使 用 的 技巧 。 

通过 图 5.6 可 以 清楚 地 看 出 ， 容 器 的 布局 将 忠实 地 按照 各 列 比例 定义 分 布 ， 即 使 宽度 总 体 
比例 和 在 不 为 100% 的 情况 下 也 如 此 。 而 较为 特殊 的 三 分 之 一 分 布 也 基本 显示 无 误 。 此外， 图 
中 也 展示 了 如 何 通 过 多 重 行列 的 嵌 套 组 合 ， 达 到 类 似 Metro 布局 的 效果 。 














指定 列 宽 比 例 与 自 定义 


.cok20 col-50 


eol-33 ‘cok66 
‘cok20 未 设置 比例 


ol-618 自 定义 cok382 自 定义 
‘col-50 coh66 


cal-50 





图 $5.6 ”iPhone 6 的 模拟 显示 


5.1.3 ”指定 列 相对 偏 移 比例 


Ionic 提供 了 以 下 预 置 的 CSS 类 ， 可 用 于 显 式 地 指定 某 些 列 从 其 默认 位 置 相对 于 容器 向 右 
偏 移 的 比例 : 


.col-offset-10: 相对 默认 位 置 偏 移 10% 容 器 宽度 
.col-offset-20: 相对 默认 位 置 偏 移 20% 容 器 宽度 
.col-offset-25: 相对 默认 位 置 偏 移 25% 容 器 宽度 
.col-offset-33: 相对 默认 位 置 偏 移 1/3 容器 宽度 
.col-offset-34: 相对 默认 位 置 偏 移 1/3 容器 宽度 
.Col-offset-50: 相对 默认 位 置 偏 移 50% 容 器 宽度 
.col-offset-66: 相对 默认 位 置 偏 移 2/3 容器 宽度 
.col-offset-67: 相对 默认 位 置 偏 移 2/3 容器 宽度 
.Col-offset-75: 相对 默认 位 置 偏 移 75% 容 器 宽度 
.col-offset-80: 相对 默认 位 置 偏 移 80% 容 器 宽度 
.col-offset-90: 相对 默认 位 置 偏 移 90% 容 器 宽度 


类 似 于 5.1.2 节 的 做 法 ， 可 以 通过 在 www\ionic.app.scss 文件 增加 自 定义 的 偏 移 比 例 CSS 
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类 来 自 定义 特定 的 相对 偏 移 比例 。 
【示例 5-4】 演示 了 自 定义 特定 偏 移 宽 度 比 例 CSS 类 
scss\ionic.app.scss 的 相关 代码 片段 





【代码 解析 】 通 过 同时 定制 偏 移行 宽 比 例 为 黄金 分 割 比 的 两 个 列 比例 (分别 为 61.8% 和 
38.2%) ， 就 能 在 示例 5-5 里 使 用 了 ， 实 现 的 效果 参见 图 5.7。 这 种 定制 方式 参考 于 Ionic 的 库 
代码 _grid.scss 实现 。 


[全 县 员 。 此 处 的 scss 文件 需要 在 项 目 工程 的 根 目录 下 成 功 执行 命令 ionic setup sass 完成 sass 的 配置 
| 后 才 会 由 Ionic 的 CLI 生成。 


【示例 5-5】 演示 了 指定 偏 移 宽度 比例 CSS 类 在 页 面 布局 中 的 使 用 
www\5.1.3.html 
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【代码 解析 】 本 代码 段 分 别 使 用 Ionic 内 置 偏 移 比例 和 自 定 义 偏 移 比例 来 达成 布局 内 将 子 
元 素 放置 到 指定 位 置 的 效果 。 


指定 列 相对 偏 移 比例 


-col-offset-33 





5.7 iPhone 6 的 模拟 显示 
实际 开发 中 ， 本 节 讨 论 的 CSS 类 可 用 于 列表 展现 中 对 于 无 数据 字段 的 留 白 效果 。 


5.1.4 纵 轴 对 齐 方式 


如 果 一 行 中 各 元 素 的 高 度 不 一 样 ， 那 么 比较 矮 的 那些 元 素 将 自动 被 拉 伸 以 适应 整 行 的 高 
度 。 

如 果 希 望 那 些 元 素 保持 自身 的 高 度 , 可 使 用 Ionic 提供 的 一 些 预 置 的 CSS 类 来 指定 这 些 元 
素 纵向 的 对 齐 方式 : 


@ .col-top: 让 元 素 纵向 顶 对 齐 

.Col-center: 让 元 素 居中 对 齐 

.Col-bottom: 让 元 素 向 底 对 齐 

.IOW-top: 让 母 容器 内 的 所 有 元 素 纵向 顶 对 齐 
.IOW-Center: 让 母 容器 内 的 所 有 元 素 居 中 对 齐 
.IOW-bottom: 让 母 容器 内 的 所 有 元 素 向 底 对 齐 


这 些 样式 类 分 别 是 通过 设置 元 素 的 CSS 3 样式 align-self 和 母 容器 的 CSS 3 样式 align-items 
来 实现 的 。 


【示例 5-6】 演 示 了 指定 纵 轴 对 齐 方式 的 CSS 类 在 页 面 布局 中 的 使 用 
Www\5.1.4.html 
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【代码 解析 】 本 代码 段 使 用 了 介绍 的 纵 轴 对 齐 方式 各 CSS 类 调整 子 元 素 纵向 位 置 ， 显 示 
出 来 的 效果 参见 图 5.8。 
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纵 轴 对 齐 方式 





图 $5.8 iPhone 6 的 模拟 显示 


5.1.5 ”响应 式 栅 格 


不 同 的 设备 屏幕 的 宽度 各 不 相同 ， 而 且 同 一 手持 设备 屏幕 也 可 能 切换 成 横 屏 (landscape) 
或 竖 屏 (portrait) 的 显示 模式 。 这 就 需要 设置 每 行 的 网 格 可 以 根据 不 同 宽度 动态 响应 宽度 大 小 
而 自 适应 调整 显示 模式 。 

Ionic 提供 的 三 个 不 同 响应 式 CSS 类 的 默认 样式 如 下 : 


@ .responsive-sm: 小 于 手机 横 屏 ( 568 像素 ) 
®@ .Iesponsive-md: 小 于 平板 竖 屏 (768 像素 ) 
®@ .Iesponsive-lg: 小 于 平板 横 屏 ( 1024 像素 ) 


当 母 容器 行 上 的 像素 数 少 于 指定 的 响应 式 CSS 类 时 ， 原 本 默认 会 在 母 容器 同一 行 上 显示 
的 列 将 会 拆 分 显示 在 不 同 的 行 上 。 本 节 的 示例 将 会 详细 显示 该 效果 。 

此 外 ， 类 似 于 5.1.2 节 的 做 法 ， 可 以 通过 在 www\ionic.app.scss 文件 增加 自 定义 的 响应 式 
CSS 类 来 自 定义 特定 的 像素 数 切换 值 。 


【示例 5-7】 演示 了 自 定义 的 像素 数 切 换 值 为 360 的 响应 式 CSS 类 
www\ionic.app.scss 的 代码 片段 


// 自 定义 响应 式 切换 闵 值 

// 小 于 360px 时 切换 

$grid-responsive-360-break: 359px !default; 

Qinclude responsive-grid-break(' .responsive-360°', 


S$grid-responsive-360-break); 


【代码 解析 】 这 里 的 代码 定义 了 一 个 响应 式 CSS 类 ， 当 母 容器 行 上 的 像素 数 少 于 360 像 
素 时 , 原本 默认 会 在 母 容器 同一 行 上 显示 的 列 将 会 拆 分 显示 在 不 同 的 行 上 。 这 种 定制 方式 参考 
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于 Ionic 的 库 代 码 _grid.scss 实现 。 
【示例 5-8】 演 示 了 指定 响应 式 CSS 类 在 页 面 布局 中 的 使 
www\5.1.5.html 的 主要 代码 片段 


<body> 
<div class="bar bar-header"> 
<hl class="title"> 响 应 式 栅 格 </h1> 
</div> 
<div class="scroll-content has-header"> 
<div class="row responsive-360"> 
<div class="col">.responsive-360</div> 
<div class="col">.responsive-360</div> 
</div> 
<div class="row responsive-sm"> 
<div class="col">.responsive-sm(568)</div> 
<div class="col">.responsive-sm(568)</div> 
</div> 
<div class="row responsive-md"> 
<div class="col">.responsive-md (768)</div> 
<div class="col">.responsive-md(768)</div> 
</div> 
<div class="row responsive-1g"> 
<div class="col">.responsive-1g(1024)</div> 
<div class="col">.responsive-1g(1024)</div> 
</div> 
</div> 
</body> 


【代码 解析 】 在 内 容 区 里 定义 了 四 行 ， 指定 的 响应 式 CSS 类 分 别 对 应 自 定义 与 Ionic 内 置 
的 响应 宽度 大 小 。 接 下 来 的 图 5.9~ 图 5.13 演示 了 同一 页 面 对 不 同 设备 宽度 的 响应 ， 即 将 原 属 
于 同行 的 子 元 素 列 拆 开 分 行 显示 。 

















响应 式 栅 格 


responsive-360 
responsive-360 


responsive-sm(568) responsive-360 responsive-360 


‘responsive-sm(568) responsive-sm(568) 


‘responsive-md(768) 

responsive-sm(568) 
responsive-md(768) 
responsive-md(768) 
responsive-lg(1024} 


responsive-md(768) 
responsive-lg(1024) 


responsive-lg(1024) 





图 5.9 iPhone 4 的 竖 屏 模式 模拟 显示 图 5.10 iPhone 4 的 横 屏 模式 模拟 显示 
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响应 式 构 格 


responsive-360 responsive-360 
responsive-sm(568) responsive-sm(568) 


responsive-md(768) 


responsive-md(768) 


responsive-lg(1024) 


responsive-lg(1024) 





图 5.11 iPhone 6 的 横 屏 模式 模拟 显示 


响应 式 构 梅 


responsive-md(768) 


responsive-Ig(1024) 


responsive-Ig(1024) 





图 5.12 ”iPad 的 竖 屏 模式 模拟 显示 


响应 式 模 格 





图 5.13 ”iPad 的 横 屏 模式 模拟 显示 


从 图 5-9~ 图 5-13 的 5 个 示例 图 片 我 们 可 以 看 出 ， 随 着 设备 和 显示 模式 的 变化 ， 页 面 中 每 
行 的 列 布局 显示 也 根据 设备 进行 了 相应 调整 。 这 种 响应 式 栅 格 能 提升 用 户 的 体验 , 已 经 慢 慢 成 
为 移动 开发 和 网 站 网 页 开发 的 主流 做 法 了 。 


5.1.6 示例 : 表情 包 图 片 库 浏览 页 
有 了 前 面 几 节 的 基础 , 就 能 利用 这 些 预制 和 自 定义 的 Ionic 栅 格 布局 CSS 样式 类 快速 地 实 
现 一 个 图 片 库 浏览 页 的 布局 了 。 相 对 于 自行 编写 大 量 CSS 样式 代码 和 后 续 的 前 台 调试 ， 站 在 
Ionic 的 肩膀 上 完成 任务 会 轻松 很 多 。 
【示例 5-9】 演示 了 一 个 图 片 库 浏览 页 的 静态 布局 实现 
www\5.1.6.html 






































<body > 
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【代码 解析 】 这 里 综合 使 用 了 前 面 各 小 节 学 习 的 行 与 列 、 响 应 式 栅 格 、 纵 轴 对 齐 CSS 样 
式 类 , 完成 了 对 因 来 自 于 不 同 收集 网 站 而 尺寸 比例 不 同 的 图 片 集 的 自 适 应 布局 与 居中 排列 ,如 
图 5.14 所 示 。 最 后 一 行使 用 到 的 图 标 相关 知识 可 参考 本 书 5.12 可 用 图 标 集 一 节 。 
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图 5.14 表情 包 图 片 库 浏览 页 


E 四 全 ) Ss 一 日 
5 .2 国定 标题 栏 

移动 App 主要 功能 页 的 整体 布局 实践 中 ， 可 见 用 户 界面 通常 被 垂直 划分 为 三 个 固定 横向 
区 域 : 顶 栏 区 (header) 、 内 容 区 (content) 和 底 栏 区 〈footer) 。 微 信 的 功能 界面 采用 的 就 是 


该 布局 ， 如 图 5.15 所 示 。 


a 








一 
| 

访 一 和 
跨 一 区 
-4 ao 

人 

国 二 = | 











图 5.15 三 栏 模式 图 例 - 微 信 的 功能 界面 布局 
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Ionic 的 顶 栏 区 总 是 位 于 设备 屏幕 项 部 ， 底 栏 区 总 是 位 于 设备 屏幕 底部 ， 而 内 容 区 将 占据 
设备 屏幕 剩余 的 空间 。 Ionic 使 用 以 下 CSS 类 声明 区 域 容器 : 
@ .bar. bar-header: 声明 元 素 为 顶 栏 区 容器 
@ bar. bar-footer: 声明 元 素 为 底 栏 区 容器 
@ .content 或 .scroll-content: 声明 元 素 为 内 容 区 容器 。 官方 推 荐 直接 使 用 ion-content 或 
ion-scroll 指令 ， 具 体 说 明 请 参阅 本 书 5.4.1 与 5.4.2 部 分 。 


本 节 将 详细 介绍 这 些 CSS 类 以 及 相关 同 级 与 下 级 样式 的 使 用 方式 。 


5.2.1 固定 标题 条 


Ionic 提供 的 CSS 样式 .bar 将 元 素 声明 为 屏幕 上 绝对 定位 的 块 状 区 域 ， 并 具有 固定 的 高 度 
(44px)。 一 旦 元 素 应 用 了 .bar 样式 ， 就 需要 选用 两 类 预定 义 样式 来 进一步 声明 元 素 及 其 内 容 
的 外 观 ， 否 则 元 素 将 默认 作为 固定 顶 栏 ， 并 且 多 个 声明 了 .bar 样式 的 元 素 将 会 发 生 覆 盖 : 

@。 同 级 样式 : 同 级 样式 与 .bar 应 用 在 同一 元 素 上 ， 声 明 元 素 的 位 置 、 配 色 等 。 

@ ”下 级 样式 : 下 级 样式 只 能 应 用 在 .bar 的 子 元 素 上 ， 声 明子 元 素 的 大 小 等 特征 。 


具体 的 使 用 示例 代码 可 参考 本 书 下 一 节 。 


元 | 如 未 有 声明 元 素 位 置 的 同 级 样式 , 则 元 素 将 默认 作为 固定 顶 栏 ,并且 多 个 同类 元 素 将 会 发 


生 槛 盖 。 
标题 条 中 可 组 合 嵌入 按钮 、 输 入 框 、 下 拉 选 择 菜单 等 多 种 控件 ,本 书 将 在 下 面 介绍 各 控件 
的 章节 里 结合 示例 代码 介绍 具体 的 实现 方法 。 





5.2.2 ”固定 顶 栏 


如 上 节 所 述 ，Ionic 提供 的 CSS 样式 .bar-header 与 .bar 结合 用 来 声明 固定 在 屏幕 顶部 的 项 
栏 , 可 以 包含 如 标题 和 左右 的 功能 按钮 。 而 bar-subheader 与 .bar 结合 将 提供 一 个 直接 固定 在 顶 
栏 下 面 的 次 级 项 栏 ， 业 内 有 时候 也 称 之 为 次 级 导航 栏 。 
【示例 5-10】 演 示 了 固定 顶 栏 相 关 的 CSS 类 在 页 面 布局 中 的 使 用 ， 如 图 5.16 所 示 。 
WWW\5.2.2.html 
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【代码 解析 】 为 div 元 素 指定 .bar 加 上 .bar-header 或 bar-subheader 即 可 使 其 成 为 固定 位 置 
的 项 栏 。 同 时 内 容 区 域 的 div 元 素 需 要 声明 对 应 的 CSS 类 : .has-header 和 .has-subheader， 用 于 
避免 内 容 区 与 项 栏 区域 重 苹 。 另 外 同时 声明 的 CSS 类 .scroll-content 和 .overflow-scroll 则 是 用 于 
指定 内 容 区 在 垂直 方向 对 不 可 见 部 分 自动 显示 滚动 条 。 


固定 顶 栏 
次 级 顶 栏 
内容 区 


5.16 固定 顶 栏 的 布局 显示 


5.2.3 固定 底 栏 


与 上 节 类 似 ，Ionic 提供 的 CSS 样式 .bar- footer 与 .bar 结合 用 来 声明 固定 在 屏幕 底部 的 底 
栏 , 该 栏 可 以 包含 如 标题 和 左右 的 功能 按钮 。 而 bar- subfooter 与 .bar 结合 将 提供 一 个 直接 固定 
在 底 栏 上 面 的 次 级 底 栏 。 
【示例 5-11】 演示 了 同时 固定 项 栏 和 底 栏 相关 的 CSS 类 在 页 面 布局 中 的 使 用 ， 如 图 5.17 
所 示 。 
WwWwW\5.2.3.html 
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【代码 解析 】 与 上 一 小 节 类 似 ， 代 码 里 加 入 了 底 栏 元 素 和 对 应 的 CSS 类 .bar-footer 与 . 
bar-subfooter， 同 时 内 容 区 域 的 div 元 素 需 要 声明 对 应 的 CSS 类 : .has-footer 和 .has-subfooter。 


固定 顶 栏 .bar .bar-header 
次 级 顶 栏 .bar .bar-subheader 


内 容 区 .scroll-content ,has-header .has- 
subheader .has-footer .has-subfooter 


次 级 底 栏 .bar .bar-subfooter 


固定 底 栏 .bar .bar-footer 





图 5.17 同时 固定 顶 栏 与 底 栏 的 布局 显示 


与 .3 按钮 


与 前 端 库 Bootstrap 类 似 , Ionic 使 用 CSS 样式 button 将 HIML 元 素 如 <a>、<button>、<input> 
等 定义 为 按钮 元 素 ， 随 后 可 以 选用 同 级 与 下 级 CSS 样式 来 进一步 声明 元 素 及 其 内 容 的 外 观 显 
示 。 

本 节 将 详细 说 明 相关 的 按钮 CSS 样式 , 另外 在 5.3.5 节 将 详 述 如 何 将 按钮 嵌入 上 一 节 所 述 
的 各 标题 栏 。 


5.3.1 普通 按钮 与 配色 结合 
CSS 样式 .button 的 默认 样式 是 display: inline-block， 因 此 元 素 宽度 是 随 其 内 部 文字 长 度 
自 适应 增长 。 结 合 Ionic 提供 的 配色 CSS 类 ， 实 现 按钮 的 配色 非常 简单 。 
【示例 5-12】 演示 了 普通 无 修饰 样式 按钮 与 Ionic 配色 CSS 结合 的 按钮 使 用 ， 如 图 5.18 
所 示 。 
www\S.3.1.html 
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【代码 解析 】 通 过 给 元 素 同 时 指定 .button 和 .button-{ 颜 色 方案 名 } 的 形式 ， 完 成 了 按钮 颜 
色 的 定制 。 


普通 按钮 与 配色 
默认 ”button-light button-stable 
button-positive “button-calm 


button-balanced Pbutton energized 





图 5.18 普通 无 修饰 样式 按钮 与 Ionic 配色 CSS 结合 的 按钮 


5.3.2 ”按钮 尺寸 、 宽 度 样 式 
Ionic 提供 了 两 类 按钮 样式 分 别 控制 按钮 的 尺寸 大 小 与 占 父 元 素 所 有 宽度 的 模式 : 


@ 尺寸 : button-small、.button-large 
@ 占 父 元 素 所 有 宽度 : .button-block、.button-fall 


-button-block 与 .button-full 在 视觉 上 的 区 别 比 较 细微 ,主要 是 .button-full 在 四 个 角 不 显示 按 
钮 的 圆 角 弧 。 








【示例 5-13】 演 示 了 控制 显示 的 尺寸 大 小 与 占 父 元 素 宽度 模式 的 按钮 CSS 类 使 用 方法 ， 
如 图 5.19 所 示 。 
Www\5.3.2.html 





Wk 


</button> 
<button class="button button-positive button-small"> 
-button-small 
</button> 
<button class="button button-stable button-large"> 
-button-large 
</button> 
</div> 
<div> 
<button class="button button-calm button-block"> 
-button-block 
</button> 
</div> 
<div> 
<button class="button button-balanced button-full"> 
-button-full 
</button> 
</div> 
</div> 
</body> 


【代码 解析 】 与 上 一 节 类 似 ， 用 于 指定 按钮 尺寸 的 CSS 类 直接 放 在 .button 后 即 可 。 


按钮 尺寸 、 宽 度 样式 


button-large 
button-block 


-button-full 





对 于 不 需要 突出 显示 按钮 整体 的 场景 ，Ionic 提供 了 两 个 按钮 样式 : 


@ .button-outline: 只 显示 按钮 外 框 与 文本 
@ .button-clear: 只 显示 按钮 文本 




















【示例 5-14】 演 示 了 无 填充 色 按 钮 与 文本 型 按钮 的 CSS 类 使 用 方法 ， 如 图 5.20 所 示 。 
www\S.3.3.html 


<body> 
<div class="bar bar-header"> 
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【代码 解析 】 与 上 一 节 类 似 ， 用 于 指定 按钮 样式 的 CSS 类 直接 放 在 .button 后 即 可 。 


无 填充 色 按 钮 与 文本 型 按钮 样式 


.button-clear 





5.20 .button-outline 与 button-clear 按钮 CSS 类 


5.3.4 ”图 标 按钮 

使 用 Ionic 内 置 的 字体 图 标 样式 ， 图 标 可 以 很 容易 地 加 入 到 按钮 元 素 中 。Ionic 文档 中 推荐 
的 办 法 是 : 直接 在 元 素 上 同时 设置 .button 样式 和 图 标 样式 ,这样 可 以 有 效 减少 DOM 中 元 素 的 
数目 。 通 过 以 下 两 个 图 标 位 置 样式 控制 图 标 在 按钮 中 的 位 置 : 

@ .icon-left: 将 图 标 置 于 按钮 左 侧 

@ .icon-right: 将 图 标 置 于 按钮 右 侧 

【示例 5-15】 演示 了 设置 带 图 标 按钮 的 CSS 类 的 方法 ， 如 图 5.21 所 示 。 
www\5.3.4.html 
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【代码 解析 】 与 上 一 节 类 似 , 用 于 指定 按钮 图 标 位 置 与 图 标 代码 的 CSS 类 直接 放 在 .button 
后 即 可 。 此 外 可 以 看 到 代码 里 最 后 一 个 自 定义 图 标的 使 用 方式 也 与 Ionic 内 置 图 标的 使 用 方式 
基本 一 致 。 


去 加载 中 尝 


会 首页 


《和 器 六 
EEC 


图 5.21 设置 带 图 标 按钮 的 CSS 类 的 方法 


本 元 可 用 的 内 置 Ionic 图 标 集 请 至 官网 http://ionicons.comy/ 查找 。 


5.3.5 “标题 栏 按钮 


Ionic 定义 的 四 个 标题 栏 里 都 可 以 直接 放 入 前 面 介绍 的 各 种 样式 和 大 小 的 按钮 ， 只 要 按照 
前 述 的 方式 设置 指定 的 CSS 样式 类 即 可 。 
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【示例 5-16】 演 示 了 在 标题 栏 放 置 按钮 的 方法 
Www\5.3.5.html 





【代码 解析 】 通 过 在 有 .bar CSS 样式 的 元 素 内 放 入 前 面 介绍 的 各 种 样式 的 按钮 元 素 , 标题 
栏 里 就 能 显示 这 些 按钮 了 ， 如 图 5.22 所 示 。 


次 级 顶 栏 按 钥 





图 5.22 在 标题 栏 放 置 各 类 按钮 的 方法 
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5.3.6 ”按钮 条 
可 以 使 用 .button-bar 样式 声明 一 个 按钮 条 容器 ， 该 容器 将 能 容纳 一 组 按钮 。 该 容器 的 位 置 
不 限 ， 所 以 也 能 放置 到 标题 栏 中 ， 使 整个 标题 栏 由 一 个 按钮 条 构成 。 


【示例 5-17】 演 示 了 按钮 条 的 使 用 方法 
www\5.3.6.html 


【代码 解析 】 以 上 代码 分 别 在 次 级 项 栏 和 内 容 区 域 嵌入 了 按钮 条 ， 如 图 5.23 所 示 。 
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图 5.23 ”按钮 条 的 使 用 方法 


列表 容器 


列表 组 件 常用 于 对 集合 类 信息 的 展示 。 无 论 是 移动 设备 或 是 PC， 提供 列表 的 各 种 组 合 显 
示 模 式 是 用 户 界面 里 最 普遍 的 需求 ， 最 常见 到 的 就 是 类 似 图 5.24 的 微 信 通讯 录 界 面 了 : 











图 5.24 ” 微 信 通 讯 录 界面 
为 了 帮助 用 户 更 快 找到 和 利用 信息 ， 业 内 使 用 多 种 多 样 的 列表 项 显示 方式 ，Ionic 已 经 内 


置 了 对 这 些 显 示 方 式 的 支持 ， 相 关内 容 将 在 本 节 一 一 讲解 。 
Ionic 提供 的 相关 CSS 样式 用 法 是 先 通过 使 用 .list 样式 定义 列表 容器 元 素 ， 然后 再 使 
用 -item 样式 定义 列表 子 成 员 元 素 完成 其 主要 结构 : 


<ul class="1list"> 





<1li class="item"> 
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5.4.1 ”分割 条 式 列表 项 


分 隔 条 式 列表 项 主要 用 于 对 列表 容器 中 的 子 列表 项 集 进 行 分 块 , 为 用 户 快速 滑动 定位 到 期 
望 的 列表 项 元 素 在 界面 上 提供 帮助 。 
【示例 5-18】 演 示 了 加 入 分 隔 条 式 列表 项 的 方法 ， 如 图 5.25 所 示 。 
Www\5.4.1.html 
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【代码 解析 】 通 讯 录 一 般 按 首 字母 排序 分 隔 ， 代 码 里 使 用 分 割 条 样式 .item-divider 突出 显 
示 分 割 条 。 另 外 有 一 些 固定 操作 可 作为 置顶 列表 项 : 代码 中 列表 的 前 两 项 即 为 置顶 列表 项 , 其 
余 个 人 联系 方式 作为 普通 列表 项 显示 。 


分 审 条 式 列表 项 -通讯 录 


Dianna Liu 





图 5.25 加 入 了 分 隔 条 的 地 址 短 列 表 界面 


5.4.2 ”列表 项 内 图 标 
列表 容器 内 的 一 些 特殊 列表 项 可 在 最 左边 或 最 右边 放置 图 标 , 以 示 区 别 。 具体 方法 为 在 列 
表 项 元 素 上 加 上 对 应 的 CSS 类 声明 : ”.item-icon-left 或 .item-icon-right。 
【示例 5-19】 演示 了 在 列表 项 左边 加 入 图 标的 方法 ， 如 图 5.26 所 示 。 
Www\5.4.2.html 的 相关 代码 片段 
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【代码 解析 了 在 列表 项 元 素 上 加 上 CSS 类 .item-icon-left, 同时 在 其 内 部 添加 图 标 元 素 .icon 
并 同时 指定 图 标 风 格 。 


列表 项 内 图 标 -通讯 录 
新 的 朋友 
让 邦 


© 





图 5.26 在 列表 项 左边 加 入 图 标 地 址 短 列表 界面 


5.4.3 ”列表 项 内 按钮 


与 5.4.2 节 类 似 ， 列 表 容 器 内 的 列表 项 可 在 最 左边 或 最 右边 放置 按钮 ， 用 于 表示 列表 项 上 
的 操作 。 具 体 方法 为 在 列表 项 元 素 上 加 上 对 应 的 CSS 类 声明 : .item-button-left 
或 .item-button-right。 
【示例 5-20】 演 示 了 在 列表 项 右边 加 入 按钮 的 方法 ， 如 图 5.27 所 示 。 
www\5.4.3.html 的 相关 代码 片段 
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【代码 解析 】 在 列表 项 元 素 上 加 上 CSS 类 .item-icon-right， 同 时 在 其 内 部 添加 按钮 元 
素 .icon 并 同时 指定 按钮 风格 。 此 外 代码 里 出 现 的 Ionic 内 置 .item-note 样式 常用 来 给 列表 项 增 
加 注释 。 


列表 项 内 按钮- 通讯 录 
时 ;新 的 朋友 
由 群 多 


陈 丽 娟 


Chalse.Bai 他 来 自 江湖 





D 


图 5.27 在 列表 项 右边 加 入 按钮 的 地 址 夭 列 表 界面 


5.4.4 列表 项 内 头像 


通讯 录 和 人 员 列 表 常 用 圆 形 框 显 示 个 人 的 头像 照片 ，Ionic 给 列表 项 提供 了 内 置 的 CSS 
类 .item-avatar， 结 合 CSS 类 .item 与 img 子 元 素 ， 即 可 获得 标准 圆 形 框 照片 的 效果 。 
【示例 5-21】 演示 了 在 给 列表 项 加 入 圆 形 个 人 头像 图 片 的 方法 ， 如 图 5.28 所 示 。 
www\5002E4.4.html 的 相关 代码 片段 





【代码 解析 】 在 列表 项 元 素 上 加 上 CSS 类 .item-avatar， 同 时 在 其 内 部 添加 图 片 元 素 img 
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即 可 。 


Chalse Bai 
他 未 让 江湖 


D 


导入 工具 

@ 道明 寺 
虚 移 人 物 

Ey Dianna Liu 
工作 伙伴 





图 5.28 在 列表 项 左边 加 入 圆 形 个 人 头像 的 地 址 短 列 表 界面 


5.4.5 ”列表 项 内 缩 略 预览 图 


与 5.4.2 节 类 似 ， 列 表 容器 内 的 列表 项 可 在 最 左边 或 最 右边 放置 正方 形 的 图 片 。 具 体 方法 

为 在 列表 项 元 素 上 加 上 对 应 的 CSS 类 声明 : .item-thumbnail-left 或 .item-thumbnail-right。 
【示例 5-22】 演 示 了 在 给 列表 项 加 入 左 侧 缩 略 预览 图 片 的 方法 ， 如 图 5.29 所 示 。 
www\5.4.5.html 的 相关 代码 片段 





【代码 解析 】 在 列表 项 元 素 上 加 上 CSS 类 item-thumbnaiLleft， 同 时 在 其 内 部 添加 图 片 元 
素 img 即 可 。 
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Dianna Liu 
工作 伙伴 





图 5.29 在 列表 项 左边 加 入 缩 略 预览 图 片 的 地 址 短 列 表 界面 


5.4.6 ”有 边 距 的 列表 


如 果 要 以 带 边 距 的 简单 表格 的 形式 显示 列表 ， 则 可 以 直接 给 列表 容器 元 素 加 上 CSS 样式 
类 .list-inset。 
【示例 5-23】 演 示 了 给 列表 容器 元 素 设置 .list-inset 样式 的 方法 ， 如 图 5.30 所 示 。 
www\5.4.6.html 的 相关 代码 片段 
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【代码 解析 】.list-inset 样式 需要 与 .list 样式 作用 在 列表 容器 元 素 上 即 可 达到 效果 。 


上 湾 市 埋 区 车 辆 音 理 所 地 址 


上 海 市 公安 局 车 辆 普 理 所 ， 访 南 公路 2638 号 


浦东 交警 支队 机 动车 管理 ， 杨 高 中 跨 1500 号 


贡 霄 交警 去 队 机 动车 管理 ， 陆 家 浜路 88 号 





图 5.30 ”在 列表 项 左边 加 入 缩 略 预览 图 片 的 地 址 短 列 表 界 面 


了 .2 展示 卡 


展示 卡 近 些 年 在 前 端 设 计 使 用 的 比较 频繁 ,一 条 记录 的 各 字段 内 容 可 以 用 展示 卡 的 形式 做 
到 分 层次 、 突 出 重点 和 固定 格式 地 呈现 给 用 户 。 像 图 5.31 中 Quora 的 Trending 界面 ， 内 容 区 
的 每 条 记录 单独 展示 为 一 个 同时 摆 放 了 分 类 、 标 题 、 图 片 和 主要 梗概 的 卡片 的 模式 在 各 APP 


中 并 不 少见 。 


Microsoft Acquires Linkedin for © 
ve=es $26.2 Billion 


园 WwDc 2016 


强 ‘Orlando Nightclub Shootings © © 








图 5.31 Quora 的 APP 界面 里 使 用 展示 卡 显 示 信 息 


Ionic 顺应 了 这 个 潮流 ， 专 门 抽象 出 展示 卡片 .card 这 个 CSS 样式 类 ， 并 使 用 类 似 本 章 的 已 
经 解析 过 的 按钮 与 列表 项 的 扩展 方法 提供 显示 效果 的 灵活 定制 手段 。 
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5.5.1 普通 卡 
展示 卡 最 简单 的 使 用 方式 是 将 其 作为 容器 元 素 包含 一 个 .item 子 元 素 。 
【示例 5-24】 演 示 了 直接 在 内 容 区 域 加 入 多 个 展示 卡 的 方法 ， 如 图 5.32 所 示 。 
Www\5.5.1.html 的 相关 代码 片段 





【代码 解析 】 每 个 展示 卡 用 CSS 样式 .card 标明 ， 然 后 包含 一 个 .item 子 元 素 ， 其 中 可 以 
放置 要 显示 的 所 有 内 容 。 此 外 最 后 一 个 展示 卡 没有 启用 CSS 样式 .item-text-wrap， 导 致 图 5.32 
中 的 文本 内 容 被 截断 。 读 者 可 以 根据 需要 决定 是 否 使 用 该 样式 。 





No.1 


This is a basic Card which contains an item that has 
wrapping text 


No2 
This is a basic Card which contains an item that has 
wrapping text. 


No3 
This is a basic Card which contains an item that has.. 





5.32 ”普通 展示 卡 


132 


第 5 章 lonic 内 置 CSS 样式 


5.5.2 ”增加 标题 栏 装饰 效果 


展示 卡 的 顶部 和 底部 可 以 加 上 一 个 或 多 个 在 5.4.1 节 使 用 过 的 分 割 条 ， 达 到 标题 栏 的 装饰 
效果 。 
【示例 5-25】 演 示 了 在 展示 卡 加 上 顶部 和 底部 标题 栏 的 方法 ， 如 图 5.33 所 示 。 
Www\5.5.2.html 的 相关 代码 片段 





【代码 解析 】 展 示 卡 增加 了 同时 作用 了 CSS 样式 类 .item 和 .item-divider 的 子 元 素 , 使 作 
为 标题 的 文本 显示 更 加 突出 。 


No.1 


This is a basic Card which contains an item that has 
wrapping text. 


卡片 底 栏 item-divider 





No.2 


This is a basic Card which contains an item that has 
wrapping text 





5.33 ”增加 标题 栏 装饰 效果 的 展示 卡 
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5.5.3” 卡 列表 


通过 在 容器 元 素 上 同时 使 用 CSS 样式 类 .list 和 .card, 可 以 创建 一 个 卡 列表 , 显示 上 非常 
类 似 5.4.6 节 的 有 边 距 的 列表 。 主 要 区 别 是 这 种 方式 创建 的 卡 多 了 底部 阴影 效果 。 
【示例 5-26】 演 示 了 卡 列表 的 使 用 方法 ， 效 果 如 图 5.34 所 示 。 
www\5.5.3.html 的 相关 代码 片段 





【代码 解析 】 展 示 卡 本 身 同时 作用 了 CSS 样式 类 .list 和 .card, 生成 出 来 的 卡其 内 部 显示 





是 一 个 列表 。 
会 Enter home address 
bb Enter phone number 
全 Enter wireless password 
图 Enter card information 
图 5.34 卡 列 表 
5.5.4” 卡 内 图 片 


与 本 书 5.4.2 和 5.4.5 两 节 类 似 , 展示 卡 内 部 的 列表 项 可 以 放置 缩 略 预览 图 和 图 标 , 用 于 这 
个 操作 的 CSS 样式 类 也 同样 是 .item-thumbnail-left， item-thumbnail-right， item-icon-left， 
item-icon-right。 
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【示例 5-27】 演示 了 卡 列表 项 放置 图 片 与 图 标的 方法 ， 如 图 5.35 所 示 。 
Www\5.5.4.html 的 相关 代码 片段 





【代码 解析 】 这 里 使 用 了 item-thumbnail-left 和 item-icon-right 分 别 在 左边 放置 新 闻 图 片 ， 
在 右边 放置 代表 未 读 消息 的 图 标 。 此 外 标题 栏 和 图 标 直接 加 入 了 微调 显示 样式 的 CSS 代码 ， 
这 里 为 了 方便 查看 直接 写 在 了 HTML 代码 里 ,工程 实践 当中 推荐 读者 到 CSS 样式 表 定 义 相 关 
的 类 。 


BUSINESS 


Pretty Hate Machine . 
Nine inch Nalls Nine inch Nails 
Nine inch Nais Nine inch Nals 
Nine inch Nais Nine inch Na 


TECHNOLOGY 


pretty Hate Machine 
Nine Inch Nais Nine inch Naills 
Nine nch Nails Nine inch Nai.. 


U.SNEWS 


Pretty Hate Machine . 
Nine Inch Nails Nine inch Nais 
Nine inch Nais Nine inch Nails 
Nine nch Nais Nine inch Nai. 





图 5.35 卡 内 图 片 与 图 标 


5.5.5 ”Facebook 型 展示 卡 


展示 卡 的 强大 之 处 在 于 可 以 根据 设计 需要 灵活 显示 各 种 内 容 ， 尤 其 是 图 片 和 文本 类 内 容 。 
Ionic 提供 的 CSS 样式 类 .item-body 指定 完全 显示 文本 内 容 主体 , CSS 样式 类 .full-image 则 用 
于 显示 占据 全 部 宽度 的 图 片 。 结 合 本 节 前 面 的 内 容 ， 我 们 可 以 灵活 组 合 完成 一 个 Facebook 型 
的 展示 卡 。 
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【示例 5-28】 演 示 了 一 个 仿 Facebook 型 的 实现 方法 ， 效 果 如 图 5.36 所 示 。 
www\5.5.5.html 的 相关 代码 片段 





【代码 解析 】 这 里 使 用 了 .item-body 使 文本 段 的 内 容 全 部 显示 出 来 ， 否 则 会 在 第 一 行 被 截 
断 。 而 foll-image 使 新 闻 图 片 自 适应 等 比例 缩放 到 适合 卡片 宽度 的 大 小 。 此 外 最 后 一 行 的 两 个 


图 标 直 接 加 入 了 微调 显示 样式 的 CSS 代码 ， 这 里 为 了 方便 查看 直接 写 在 了 HTML 代码 里 ， 工 
程 实践 当中 推荐 读者 到 CSS 样式 表 定 义 相 关 的 类 。 





Marty McFly 
November 05, 1955 


This sa “Facepook styled Card The header 到 
created from a Thumbnail List tem. the content is 
from a card-body consisting of an image and 
paragraph text. The footer consists of tabs, icons 
aligned let. within the card-footer 





轴 5 竹 国 20 评 论 


图 5.36 仿 Facebook 型 展示 卡 
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表单 控件 样式 


到 目前 为 止 ， 本 章 介绍 的 内 容 基 本 以 展示 为 主 ， 不 涉及 用 户 进行 内 容 输入 。 而 Ionic 对 于 
这 部 分 的 需求 也 进行 了 统一 设计 , 并 且 还 为 输入 样式 内 置 了 多 种 展示 方式 , 基本 能 够 完成 市 
上 所 见 的 APP 如 图 5.37 所 示 的 常见 的 输入 控件 和 展现 样式 。 























如 未 有 声明 元 素 位 置 的 同 级 样式 , 则 元 素 将 默认 作为 固定 顶 栏 , 并且 多 个 同类 元 素 将 会 发 
生 覆 盖 。 在 第 1 章 我 们 已 经 介绍 过 Ionic 是 基于 HIML 5 和 CSS3 的 ， 因 此 本 节 未 涉及 的 
其 他 HIML 5 组 件 也 是 可 以 使 用 和 自行 定制 显示 样式 的 。 相 关内 容 读者 可 以 自行 查阅 参 
考 介绍 HIML 5 和 CSS 3 的 相关 书籍 ， 本 书 就 不 再 元 述 了 。 














如 发 > 莹 共 沾 




















图 537 APP 里 的 表单 输入 


5.6.1 输入 字段 名 提示 

文本 输入 字段 应 该 是 功能 型 APP 不 可 避免 会 使 用 到 的 表单 字段 了 ，Ionic 根据 常见 的 展现 
方式 ， 为 开发 者 预 置 了 四 种 文本 输入 字段 的 字段 名 提示 方式 : 

@ HTML 属性 placeholder: 文本 输入 字段 内 直接 提示 输入 字段 名 ; 

@@ CSS 类 .input-label: 文本 输入 字段 左边 固定 显示 输入 字段 名 ; 

@ CSS 类 .item-stacked-label: 文本 输入 字段 上 面 堆 合 式 输 入 字段 提示 ; 
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@ CSS 类 .item-floating-label: 文本 输入 字段 上 面 以 动画 方式 浮动 显示 输入 字段 提示 。 


Be 使 用 这 些 字段 名 提示 方式 时 ， 都 需要 为 外 面 的 label 元 素 同时 先 加 上 CSS 类 :item | 
和 :item-input ， 里 面 的 span 元 素 则 需要 加 上 CSS 类 .input-label 的 声明 ; 使 用 CSS 
类 .item-floating-label 的 完整 功能 需要 启动 Ionic 的 JavaScript 基础 服务 模块 支持 ,示例 5-28 

有 相关 的 初始 化 部 分 。 


通过 文字 解释 四 种 提示 方式 的 区 别 不 够 直接 , 本 节 将 四 种 方式 合并 在 一 起 通过 一 个 示例 来 
显示 它们 的 表现 和 区 别 。 
【示例 5-29】 对 比 演示 了 本 小 节 介绍 的 四 种 文本 输入 字段 的 字段 名 提示 方式 ， 效 果 如 图 
5.38 所 示 。 
www\5.6.1.html 的 相关 代码 片段 
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<input type="password"> 
</label> 
</div> 
<div class="list"> 
<div class="item item-divider"> 堆 释 式 输入 字段 提示 .item-stacked-label</div> 
<label class="item item-input item-stacked-label"> 
<span class="input-label"> 邮 件 </span> 
<input type="text" placeholder="john@suhr.com"> 
</label> 
</div> 
<div class="list"> 
<div class="item item-divider"> 带 上 浮动 画 输 入 字段 提示 .item-floating-label</div> 
<label class="item item-input item-floating-label"> 
<span class="input-label"> 邮 件 </span> 
<input type="text" placeholder=" 邮 件 "> 
</label> 
</div> 
</div> 
</body> 


【代码 解析 】 此 处 的 代码 比 以 前 的 代码 段 都 要 完整 , 这 是 为 了 完整 说 明 使 用 需要 注意 的 部 
分 : 在 引入 JavaScript 的 部 分 必须 引入 Ionic 和 Angular 的 打包 文件 ionic.bundle.js。 为 了 方便 
读者 了 解 原理 ， 代 码 里 直接 以 嵌入 JavaScript 的 方式 初始 化 了 Angular 的 App， 并 且 引 入 了 对 
Ionic 的 模块 依赖 。label 元 素 都 同时 加 上 了 CSS 类 .item 和 .item-input， 里 面 的 span 元 素 需 要 加 
上 CSS 类 .input-label 的 声明 。 





提示 输入 3 





placeholder 方 式 placeholder 方 式 


example 








固定 输入 字段 名 jinput-label 固定 输入 字段 名 .input-label 

账户 名 称 

输 A 窗 码 输入 

堆 琶 式 输入 字段 提示 .item-stacked-label 堆 琶 式 输入 字段 提示 .item-stacked-label 
邮件 邮件 


vip@example.com 


带 上 浮动 画 输入 字 





示 jitem-floating-label 带 上 浮动 画 输入 宇 段 提示 .item-floating-label 


vip@examplecom| 











图 5.38 四 种 文本 输入 字段 的 字段 名 提示 方式 
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5.6.2 ”输入 控件 图 标 


在 前 面 的 图 5.32 中 展现 的 常见 APP 里 的 表单 输入 示例 中 , 可 以 发 现 为 了 使 界面 更 加 友好 ， 
有 在 文本 输入 控件 前 加 上 提示 图 标的 做 法 ，Ionic 提供 对 该 需求 轻松 满足 的 内 置 支持 CSS 
类 .placeholder-icon。 
【示例 5-30】 演示 了 为 文本 输入 控件 增加 图 标的 方法 ， 如 图 5.39 所 示 。 
www\5.6.2.html 的 相关 代码 片段 


<div class="list list-inset"> 
<label class="item item-divider"> 
<h2 class="title" style="text-align: center;"> 用 户 登录 </h2> 
</label> 
<label class="item item-input"> 
<i class="icon ion-person placeholder-icon"></i> 
<input type="text" placeholder=" 输 入 账号 "> 
</label> 
<label class="item item-input"> 
<i class="icon ion-android-lock placeholder-icon"></i> 
<input type="password" placeholder=" 输 入 密码 "> 
<i class="icon ion-backspace dark" 
style="font-size: 20px; margin-right: 10px7"> 
</i> 
</label> 
<label> 
<button class="button button-dark button-block item"> 登 录 </button> 
</label> 
</div> 














【代码 解析 】 这 里 主要 使 用 了 . placeholder-icon 在 文本 输入 控件 前 增加 图 标 。 第 2 个 控件 
右边 的 删除 按钮 是 利用 了 图 标 在 不 声明 位 置 的 情况 下 会 被 默认 置 左 的 特性 ,我 们 为 了 便于 讲解 
使 用 嵌入 式样 式微 调 了 这 个 图 标的 大 小 与 右边 间距 ， 工 程 实践 当中 推荐 读者 到 CSS 样式 表 定 
义 相关 的 类 的 做 法 。 此 外 细心 的 读者 可 能 会 发 现 图 5.39 里 的 各 字段 都 不 在 占 满 屏 幕 的 所 有 宽 
度 ， 这 是 因为 在 列表 上 增加 了 CSS 样式 类 .list-inset。 





输入 控件 图 标 


用 户 登 录 





图 5.39 ”为 输入 控件 增加 图 标 
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现在 看 看 图 5.39， 两 个 文本 输入 控件 在 形式 上 已 经 和 图 5.37 中 的 登录 输入 控件 比较 相似 
了 。 可 见 基于 Ionic 提供 的 内 置 CSS 类 ， 我 们 需要 再 编写 的 代码 是 相当 精简 的 。 





5.6.3 ”有 边 距 的 输入 表单 

默认 情况 下 ， 所 有 的 输入 组 件 将 占据 其 母 容器 (一 般 是 有 CSS 样式 类 .list 的 元 素 ) 的 所 
有 宽度 。 为 了 满足 可 能 的 显示 需要 ， 同 时 Ionic 提供 了 样式 类 .list-inset， 这 将 使 母 容 器 中 的 所 
有 元 素 左右 都 会 加 上 10 像素 的 内 部 间隙 (padding) 。 








使 用 样式 类 .list-inset 后 会 发 现 列表 的 显示 跟 展示 卡 card 很 像 ， 它 们 之 间 存 在 的 细微 区 别 
是 展示 卡 的 下 边缘 是 有 阴影 的 , 而 列表 没有 。 在 性 能 敏感 的 场景 下 ,可 以 优先 考虑 使 用 基 
| 于 .list-inset 的 列表 展示 实现 。 








5.6.4 ”输入 控件 单独 设置 边 距 


如 果 在 实践 中 对 5.6.3 节 的 实现 范围 要 求 缩小 ， 需 要 定制 只 有 某 个 列表 项 插入 文本 输入 控 
件 后 有 一 定 内 部 间隙 ， 则 可 以 使 用 Ionic 提供 的 样式 类 .item-input-inset 在 列表 项 上 。 
【示例 5-31】 演 示 了 列表 项 插入 文本 输入 控件 后 保持 内 部 间隙 的 方法 ， 效 果 如 图 5.40 所 示 。 
www\5.6.4.html 的 相关 代码 片段 


<div class="1ist"> 
<div class="item item-input-inset"> 
<label class="item-input-wrapper"> 
<input type="text" placeholder=" 请 输入 收 到 的 短信 验证 码 "> 
</label> 
<button class="button button-small button-positive"> 
提交 
</button> 
<button class="button button-small"> 
重新 发 送 (35) 
</button> 
</div> 
</div> 


【代码 解析 】 这 里 主要 使 用 了 样式 类 .item-input-inset 在 列表 项 上 。 此 外 需要 注意 输入 控件 
还 用 样式 类 .item-input-wrapper 包裹 了 起 来 。 





输入 控件 单独 设置 边 距 


重新 发 送 B5) 








图 5.40 输入 控件 单独 设置 边 距 
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5.6.5 “标题 栏 上 放置 文本 输入 控件 


Ionic 支持 直接 在 标题 栏 里 放置 文本 输入 控件 ， 其 使 用 方式 与 本 书 5.6.4 节 介绍 的 相似 。 这 
种 类 型 的 展示 方式 经 常用 于 提供 查找 功能 。 
【示例 5-32】 演 示 了 标题 栏 插入 文本 输入 控件 的 方法 ， 如 图 5.41 所 示 。 
www\5.6.5.html 的 相关 代码 片段 





【代码 解析 】 这 里 主要 使 用 了 样式 类 .item-input-inset 在 标题 栏 上 。 此 外 需要 注意 输入 控件 
还 用 样式 类 .item-input-wrapper 包 庄 了 起 来 。 


3 
个 放置 输入 控件 到 标题 栏 + 


图 5.41 放置 文本 输入 控件 到 标题 栏 





与 . 7 开关 类 组 件 


开关 类 组 件 在 用 户 设置 类 的 界面 里 是 不 可 缺少 的 元 素 ， 读 者 几乎 可 以 在 每 个 移动 APP 里 
看 到 它 的 使 用 。 像 图 5.42 中 ， 各 个 是 / 否 类 型 的 选项 开关 就 是 用 多 个 开关 类 组 件 实现 的 。 
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5.42 ”输入 控件 在 手机 声音 设置 里 使 用 
这 类 组 件 本 质 上 是 由 HIML 的 标准 复 选 框 控件 checkbox 构成 ,而 Ionic 对 其 用 加 载 了 CSS 
样式 类 .toggle 的 label 元 素 进行 了 封装 ， 使 之 视觉 上 与 使 用 上 更 适合 可 触摸 类 设备 的 使 用 。 类 
似 其 他 组 件 ， 开 关 类 组 件 可 以 使 用 toggle-{ 颜 色 代 码 } 的 方式 指定 选中 状态 时 的 显示 颜色 。 


Be 当 开关 类 组 件 作 为 列表 项 使 用 时 ， 需 要 在 列表 项 元 素 上 同时 加 载 CSS 样式 类 .item-toggle， 


否则 组 件 不 会 靠 容器 的 最 右边 布局 显示 。 





【示例 5-33】 演 示 了 在 列表 中 使 用 开关 类 组 件 的 方法 ， 如 图 5.43 所 示 。 
www\5.7.html 的 相关 代码 片段 
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【代码 解析 】 列 表 项 元 素 上 加 载 了 CSS 样式 类 .item-toggle，label 元 素 使 用 CSS 样式 
类 .toggle 构造 一 个 开关 类 组 件 ， 并 指定 了 颜色 。 而 指定 了 CSS 样式 类 .track 的 div 元 素 用 于 构 
造 包含 了 一 个 完成 触摸 操作 功能 的 句柄 。 





























开关 类 组 件 








图 5.43 ”在 列表 中 使 用 开关 类 组 件 





范围 选择 组 件 


范围 选择 (又 被 称 为 滑动 条 ) 组 件 是 在 HTML 5 中 新 引入 的 元 素 ， 常 用 来 进行 连续 值 范 
围 的 调节 选择 。 移 动 APP 的 界面 设计 中 ， 一 般 会 将 范围 选择 组 件 的 可 视 部 件 组 成 为 三 部 分 : 
左右 图 标 和 中 间 的 滑动 块 ( 类 型 为 range 的 HIML input 元 素 ) 。Ionic 的 官方 文档 推荐 使 用 一 
个 加 载 了 CSS 样式 类 .range 的 容器 ， 元 素 包含 这 三 部 分 来 生成 一 个 完整 的 范围 选择 组 件 。 

【示例 5-34】 演 示 了 单独 使 用 或 在 列表 中 使 用 范围 选择 组 件 的 方法 ， 如 图 5.44 所 示 。 

www\5.8.html 的 相关 代码 片段 


<div class="range"> 
<i class="icon ion-volume-low"></i> 
<input type="range" name="volume"> 
<i class="icon ion-volume-high"></i> 
</div> 
<div class="list"> 
<1i class="item item-divider"> 耗 电 设置 </1i> 
<div class="item range range-positive"> 
<i class="icon ion-ios-sunny-outline"></i> 
<input type="range" name="volume" min="0" max="100" value="33"> 
<i class="icon ion-ios-sunny"></i> 
</div> 
<div class="item range range-balanced"> 
<i class="icon ion-ios-bolt-outline"></i> 
<input type="range" name="volume" min="0" max="100" value="50"> 
<i class="icon ion-ios-bolt"></i> 
</div> 
</div> 
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【代码 解析 使 用 加 载 了 CSS 样式 类 .range 的 容器 元 素 包 含 这 三 部 分 来 生成 一 个 完整 的 范 





围 选择 组 件 。 此 外 使 用 CSS 样式 类 .range-{ 颜 色 代 码 } 的 方式 指定 左边 的 有 效 范围 的 线条 颜色 。 

















[ 移动 设备 上 查看 。 


在 PC 上 的 颜色 效果 可 能 因为 设备 的 CSS 适 配 关 系 无 法 演示 出 来 ,真正 效果 需要 在 实际 的 | 











图 5.44 单独 使 用 或 在 列表 中 使 用 范围 选择 组 件 的 方法 


选择 框 组 件 


标准 HTML 选择 框 组 件 select 的 表现 形式 都 不 太一 样 ， 例 如 , 在 PC 上， 是 一 个 传统 的 下 
拉 框 ， 如 图 5.45 所 示 ; 在 Android 是 一 个 单 选 弹出 窗 ， 如 图 5.46 所 示 ; 而 iOS 目前 已 不 太 流 
行 用 这 种 形式 的 组 件 了 。 因 为 标准 组 件 的 泻 染 由 设备 本 身 的 浏览 器 控制 ， 因 此 使 用 Ionic 展现 
的 选择 框 组 件 也 基本 根据 设备 类 型 外 形 各 异 。 


Lightsaber 





图 5.45 选择 框 组 件 在 PC 设备 上 显示 图 5.46 选择 框 组 件 在 安 卓 设备 上 显示 


Ionic 的 官方 文档 推荐 使 用 一 个 加 载 了 CSS 样式 类 .item-select 的 容器 元 素 ,包含 标准 HIML 
选择 框 组 件 select 来 生成 一 个 Ionic 下 列表 项 内 正常 显示 的 选择 框 组 件 。 





【示例 5-35】 演示 了 使 用 











加 载 了 .item-select 的 容器 元 素 , 包含 HTML 选择 框 组 件 的 方法 ， 
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如 图 5.47 所 示 。 
www\5.9.html 的 相关 代码 片段 


<div class="list"> 
<label class="item item-input item-select item-assertive"> 
<div class="input-label"> 
Lightsaber 
</div> 
<select> 
<option>Blue</option> 
<option selected>Green</option> 
<option>Red</option> 
</select> 
</label> 
</div> 


【代码 解析 】 使 用 加 载 了 CSS 样式 类 .item-select 的 容器 元 素 ， 包 含 标准 HTML 选择 框 组 
件 select。 此 外 直接 使 用 CSS 样式 类 . item-{ 颜 色 代码 } 的 方式 调整 组 件 颜色 外 观 。 





图 5.47 使 用 Ionic 选择 框 组 件 的 安 卓 界面 


龟 
选项 卡 栏 
选项 卡 是 一 个 可 以 包含 多 个 按钮 或 链接 的 容器 ， 通 常用 于 提供 一 致 的 导航 体验 。 几乎 所 
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有 具有 一 定 功能 集 的 APP 或 多 或 少 都 会 利用 选项 卡 形式 的 组 件 进行 视图 或 功能 切换 ,如 图 5.48 
和 图 5.49 所 示 。 












顶部 图 标 
置 左 型 选 
项 卡 ， 背 
景 红 
气泡 狗 六 情绪 篇 
教 你 花 式 释放 小 情绪 
秋 裤 错 晓 晓 篇 
我 就 稳 静 地 看 着 你 EE 
Db . EE 
md 项 卡 
图 5.48 Quora 界面 中 选项 卡 使 用 图 5.49 ” 微 信 界面 中 选项 卡 使 用 


Ionic 中 首先 需要 使 用 .tabs 样式 声明 选项 卡 栏 ， 然 后 使 用 .tab-item 样式 声明 选项 卡 成 员 。 
创建 的 选项 卡 默认 位 于 屏幕 底部 。 随 后 可 以 继续 使 用 三 类 内 置 定义 CSS 样式 类 来 进一步 声明 
元 素 及 其 内 容 的 外 观 : 


@@ ”上 级 样式 : 上 级 样式 应 用 于 .tabs 的 父 元 素 中 ， 声 明 选 项 卡 的 平台 特征 。 
@” 同 级 样式 : 同 级 样式 与 .tabs 应 用 在 同一 元 素 上 ， 上 声明 选项 卡 的 位 置 、 配 色 等 。 
@ 下 级 样式 : 下 级 样式 只 能 应 用 在 .tabs 的 子 元 素 上 ， 声 明子 元 素 的 大 小 等 特征 。 


下 面 各 小 节 将 根据 功能 分 别 介绍 这 些 内 置 定义 CSS 样式 类 的 使 用 和 显示 效果 。 











亏 使 用 了 选项 卡 栏 的 界面 需要 为 同一 页 面 里 的 ion-content 指令 组 件 加 入 CSS 样式 类 .has-tabs 
[ 或 . has-tabs-top ， 和 否则 显示 上 会 有 重 得 材 盖 现象 发 生 。 











5.10.1 普通 文本 型 选项 卡 


选项 卡 栏 里 的 选项 卡 默认 只 包含 文字 ,可 通过 含有 .tab-item 样式 声明 的 子 成 员 来 增加 。 另 
外 可 以 用 以 下 CSS 样式 类 对 选项 卡 栏 和 其 中 的 选项 卡 进行 显示 设置 : 

@ tabs-top: 将 选项 卡 栏 置顶 显示 。 

@ .tabs-{ 颜 色 代码 }: 设置 选项 卡 栏 的 背景 颜色 。 

@ tabs-color-{ 颜 色 代 码 }: 设置 选项 卡 的 默认 字体 颜色 。 
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而 对 于 选项 卡 〈 已 含有 .tab-item 样式 声明 的 子 成 员 ) 也 可 以 用 以 下 CSS 样式 类 或 组 合 进 
行 细 化 设置 : 
@ active tab-item-{ 闫 色 代码 }: 单独 设置 当前 处 于 被 选中 状态 的 选项 卡 的 字体 颜色 。 
@ disabled: 设置 当前 被 禁用 的 选项 卡 状 态 ， 会 导致 字体 颜色 变 灰 的 显示 效果 。 
【示例 5-36】 演 示 了 声明 普通 文本 型 选项 卡 与 通过 CSS 样式 类 进行 显示 设置 的 方法 ， 效 
果 如 图 5.50 所 示 。 
www\5.10.1.html 的 相关 代码 片段 











<div class="tabs tabs-top tabs-dark tabs-color-energized "> 
<a class="tab-item active tab-item-positive"> 
Home 
</a> 
<a class="tab-item"> 
Favorites 
</a> 
<a class="tab-item disabled"> 
Settings 
</a> 
</div> 


【代码 解析 】 在 选项 卡 栏 声明 了 .tabs-top 样式 置顶 ，.tabs-dark 设置 整个 选项 卡 栏 的 背景 颜 
色 为 黑色 ，.tabs-color-energized 定义 了 下 属 选项 卡 成 员 的 默认 字体 颜色 为 黄色 。 代 码 里 为 演示 
期 间 ， 将 第 一 个 选项 卡 成 员 通过 .active 设 为 活动 状态 ， 随 后 用 .tab-item-positive 将 其 字体 颜色 
从 默认 颜色 改 为 蓝 色 。 最 后 一 个 成 员 选项 卡通 过 .disabled 设 为 禁用 状态 ， 导 致 其 字体 颜色 相对 
默认 颜色 变 灰 。 





图 5.50 Ionic 普通 文本 型 选项 卡 设置 


5.10.2 图标 型 选项 卡 


给 选项 卡 栏 的 选项 卡 加 上 图 标 会 使 其 更 加 生动 ， 对 于 希望 采用 简洁 方式 显示 界面 的 APP 
设计 来 说 , Ionic 提供 了 对 图 标 型 选项 卡 的 支持 : 只 需要 在 选项 卡 栏 上 声明 .tabs-icon-only 样式 ， 
并 使 用 HIML 的 <i> 标 签 在 -tab-item 中 插入 图 标 子 元 素 即 可 。 

【示例 5-37】 演 示 给 选项 卡 栏 的 选项 卡 加 上 图 标的 方法 ， 效 果 如 图 5.51 所 示 。 
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www\5.10.2.html 的 相关 代码 片段 


<div class="scroll-content has-footer has-header"> 
内 容 区 
<div class="tabs tabs-icon-only tabs-calm"> 
<a class="tab-item"> 
<i class="icon ion-home"></i> 测 试 文字 
</a> 
<a class="tab-item"> 
<i class="icon ion-star"></i> 
</a> 
<a class="tab-item"> 
<i class="icon ion-gear-a"></i> 
</a> 
</div> 
</div> 


【代码 解析 】 在 选项 卡 栏 声 明了 .tabs-icon-only 设置 整个 选项 卡 栏 的 将 只 显示 图 标 ， 这 样 
即使 在 代码 里 的 选项 卡 内 出 现 了 “测试 文字 ”的 文本 ， 最 终 的 显示 时 也 不 会 显示 出 来 。 





图 5.51 Ionic 普通 文本 型 选项 卡 设置 


5.10.3 图标 置 顶 或 置 左 型 选项 卡 

最 常 出 现 的 选项 卡 形式 还 是 图 标 与 文字 同时 显示 的 模式 。Ionic 支持 相对 文本 把 图 标 置顶 
或 图 标 置 左 的 CSS 样式 类 作用 在 选项 卡 栏 元 素 上 : 

@ .tabs-icon-top: 相对 文本 把 图 标 置顶 。 

@ .tabs-icon-left 相对 文本 把 图 标 置 左 。 


【示例 5-38】 演 示 图 标 置顶 或 置 左 型 选项 卡 栏 的 使 用 方法 ， 效 果 如 图 5.52 所 示 。 
www\5.10.3.html 的 相关 代码 片段 


<div class="bar bar-header item-input-inset bar-balanced"> 
<label class="title"> 设 置 图 标 型 选项 卡 </label> 
</div> 
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【代码 解析 在 分 别 使 用 .tabs-icon-top 或 .tabs-icon-left 与 .tabs 共用 声明 图 标 置顶 或 置 左 型 
选项 卡 栏 ,此 外 因为 底部 已 有 底部 标题 栏 ,所 以 代码 里 把 位 于 底部 的 选项 卡 栏 放 在 了 内 容 区 里 ， 
否则 会 发 生 互相 重 县 覆盖 的 现象 。 如 果 希 望 用 更 规范 统一 的 代码 布局 ， 有 一 定 CSS 技术 经 验 
的 读者 可 自行 修改 相关 的 样式 类 ， 这 里 不 再 歼 述 。 


设置 图 标 型 选项 卡 











图 5.52 ”图 标 置顶 或 置 左 型 选项 卡 
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5.10.4 选项 卡 指示 条 

选项 卡 指示 条 又 被 直译 为 条 带 风格 ,这 种 设置 使 用 一 个 细 长 的 反 背 景色 条 带 附 加 在 选项 卡 
与 内 容 区 交接 的 边缘 表示 该 选项 卡 处 于 被 选中 的 状态 。 本 节 开头 的 图 5.43 与 图 5.44 中 都 能 找 
到 这 种 风格 的 应 用 。 在 Ionic 中 , 使 用 .tabs-striped 样式 将 选项 卡 栏 声明 为 带 选项 卡 指示 条 风格 。 


通过 使 用 Ionic 内 置 CSS 样式 .active 作用 在 选项 卡 上 来 声明 当前 被 选中 的 选项 ， 一 个 选项 





卡 栏 可 以 同时 声明 多 个 当前 被 选中 的 选项 ， 虽 然 这 种 用 法 极 少见 到 实际 的 APP 采用 。 


【示例 5-39】 演 示 设 置 选项 卡 指示 条 的 方法 ， 效 果 如 图 5.53 所 示 。 
www\5.10.4.html 的 相关 代码 片段 
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</div> 


【代码 解析 】 位 于 项 部 与 底部 的 两 个 选项 卡 栏 都 使 用 了 .tabs-striped 样式 将 选项 卡 栏 声明 
为 带 选项 卡 指示 条 风格 。 指 示 条 会 采用 跟 选 项 卡 栏 背景 色 不 同 的 颜色 来 突出 显示 , 因此 设置 了 
选项 卡 栏 背 景色 的 指示 条 颜色 是 白色 的 , 而 未 设置 的 指示 条 颜色 是 跟 选 项 卡 图 标 或 文字 同样 颜 
色 的 。 


























图 5.53 ”设置 选项 卡 指示 条 


自 定义 主题 颜色 

类 似 其 他 前 端 库 如 Bootstrap，Ionic 提供 了 内 置 的 语义 配色 方案 并 定义 了 含 9 种 颜色 的 默 
认 颜 色 集 ， 如 图 5.54 所 示 。 这 些 默 认 的 颜色 与 代码 可 参见 Ionic 网 站 
http://ionicframework.com/docs/components/#colors。 

对 于 一 般 的 项 目 ， 直 接 使 用 Ionic 的 这 些 颜色 即 可 达到 比较 满意 的 界面 配色 效果 ， 常 见 的 
使 用 方式 为 : 
{ 顾 色 代码 }: 改变 字体 颜色 
{ 顾 色 代码 }-bg: 改变 背景 颜色 
{ 顾 色 代码 }-border: 改变 边框 颜色 
bar-{ 闫 色 代 码 }: 改变 标题 栏 颜色 
button-{ 颜 色 代 码 }: 改变 按钮 颜色 
togsgle-{ 颜 色 代 码 }: 改变 开关 组 件 颜 色 
Tange-{ 闫 色 代 码 }: 改变 范围 选择 组 件 颜 色 
item-{ 颜 色 代 码 }: 改变 选择 框 组 件 颜 色 
tabs-{ 颜 色 代 码 }: 改变 选项 卡 栏 背景 颜色 
tabs-color-{ 颜 色 代码 }: 改变 选项 卡 栏 文本 字体 与 图 标 颜 色 
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light 


stable 


positive 


calm 





图 5.54 Ionic 默认 颜色 代码 集 


如 果 有 特殊 需要 想 要 修改 颜色 代码 对 应 的 颜色 定义 ， 推 荐 的 方式 是 打开 项 目 目录 下 的 
www\lib\ionic\scss\_variables.scss 文件 ， 可 以 发 现 文件 开头 是 以 下 代码 : 





随后 直接 更 改 里 面 某 颜色 代码 对 应 的 颜色 值 后 保存 文件 并 重新 打包 即 可 。 
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与 .| 2 可 用 图 标 集 


Ionic 提供 了 开源 免费 的 ionicons 图 标 样式 库 供 默认 使 用 ， 读 者 可 以 访问 网 站 
http://ionicons.com/ 来 查找 可 供 使 用 的 图 标 。 由 于 一 共有 超过 500 个 图 标 可 供 选 择 ， 为 了 方便 
查找 ， 该 页 面 提供 了 输入 关键 字 自动 显示 相关 图 标的 快速 筛选 方式 ， 如 图 5.55 所 示 。 


(e) 


IONICONS 





© star 9209 


GnHub - CDN 


information 








? © ©® 





图 5.55 ionicons 图 标 样式 库 搜索 information 关键 字 


找到 需要 的 图 标 后 ， 在 界面 点 击 该 图 标 ， 即 显示 该 图 标 对 应 的 图 标 名 称 以 供 使 用 。 

使 用 图 标 很 简单 ， 推 荐 在 <i> 元 素 上 声明 以 下 两 个 CSS 类 : 

@@ .icon: 将 元 素 声 明 为 图 标 

@ .ion-{ficon-name}: 声明 要 使 用 的 图 标 名 称 

通常 使 用 i 元 素 定义 图 标 ， 例 如 下 面 声明 了 元 素 显示 ion-home 图 标 : ”<i class="icon 
ion-home"></> 
因为 Ionic 提供 的 是 字体 图 标 , 因此 在 容器 元 素 中 插入 图 标 后 , 可 直接 使 用 元 素 的 .font-size 
样式 指定 图 标的 大 小 。 
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与 .| 3 内 边 距 微调 


Ionic 中 许多 组 件 都 有 默认 的 内 边 距 (padding) 。Ionic 初始 设置 了 内 边 距 尺寸 都 是 10px， 
并 且 定义 了 以 下 样式 类 用 于 给 开发 者 设置 组 件 的 边 距 样式 : 


@ padding: 每 边 都 有 内 边 距 
padding-vertical: 上 下 边缘 有 内 边 距 
padding-horizontal: 左右 边缘 有 内 边 距 
padding-top: 上 边缘 有 内 边 距 
padding-right: 右边 缘 有 内 边 距 
padding-bottom: 下 边缘 有 内 边 距 
padding-left: 左边 缘 有 内 边 距 


类 似 本 书 5.11 节 自 定义 主题 颜色 的 方法 ，Ionic 支持 对 内 边 距 尺寸 的 自 定义 。 推 荐 的 方式 
是 打开 项 目 目录 下 的 www\lib\ionic\scss\_variables.scss 文件 ,找到 对 SCSS 变量 $content-padding 
定义 的 代码 行 : 
| $content-padding: 10px !default; 
直接 将 后 面 的 10px 改 为 读者 想 要 的 数值 即 可 。 


5.1 4 小 结 


本 章 介绍 了 只 使 用 Ionic 的 内 置 CSS 样式 文件 进行 页 面 布局 和 开发 的 基础 知识 与 技巧 。 包 
括 Ionic 从 整体 栅 格 布局 对 齐 到 HTML 组 件 的 界面 定制 组 合 、 如 何 通过 修改 SCSS 文件 自 定义 
界面 以 及 内 置 图 标 集 的 使 用 。 

下 一 章 将 开始 进入 介绍 Ionic 的 内 置 JS 指令 与 相关 服务 类 组 件 的 基础 知识 。 
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完成 了 第 $ 章 关 于 Ionic 内 置 CSS 样式 类 和 对 其 进行 定制 修改 的 方法 讨论 后 , 从 本 章 开始 ， 
本 书 开始 介绍 Ionic 最 强大 与 复杂 的 JavaScript 指令 与 服务 部 分 。Ionic 把 移动 端 开发 中 常见 的 
UI 组 件 间 组 合 与 协作 模式 通过 AngularJS 的 指令 (Directive) 进行 了 扩展 ， 便 于 开发 者 在 基于 
Web 技术 快速 开发 符合 业内 移动 界面 规范 或 经 典 场景 的 APP。 

为 了 帮助 读者 先 在 总 体 上 对 Ionic 内 置 JavaScript 指令 集 有 个 全 面 的 把 握 ， 本 章 将 简短 说 
明 它 们 ， 以 助 读者 抓 住 要 点 ， 快 速 理解 后 面 章节 的 内 容 。 

本 章 主要 涉及 的 知识 点 有 : 

@ Ionic 内 置 JavaScript 组 件 分 类 与 命名 区 别 。 

@ Ionic 内 置 JavaScript 组 件 与 内 置 CSS 样式 类 的 关系 。 

@ 使 用 Ionic 的 JavaScript 组 件 在 开发 中 遇 到 的 常见 问题 解决 思路 。 


Ionic 内 置 JS 组 件 


相对 于 第 5 章 学 习 的 Ionic 内 置 CSS 样式 类 ，Ionic 指令 组 件 提供 的 组 件数 和 覆盖 的 功能 

要 更 多 和 更 全 面 ， 同 时 由 于 涉及 与 数据 层 和 事件 监听 函数 的 互动 ， 使 用 起 来 也 会 更 复杂 。 因 此 

- 般 Ionic 的 指令 除了 可 以 设置 CSS 样式 类 以 外 ， 还 可 以 或 者 需要 设置 符合 AngularJS 规范 的 
属性 《与 函数 ) 。 














6.1.1 组件 分 类 与 前 后 缀 说 明 
按照 AngularJS 的 组 件 分 类 ，Ionic 内 置 JavaScript 组 件 可 以 分 为 两 大 类 : 


@ ”指令 组 件 (Directive ) : 以 元 素 (Element ) 、 属 性 ( Attribute ) 或 CSS 类 ( CSS Class ) 
形式 出 现在 HTML 文件 或 HTML 模板 代码 中 的 Angular 指令 组 件 。 元 素 型 指令 组 件 
比较 好 认 , 都 带 有 ion- 的 前 级 ,后 面 的 一 个 或 多 个 单词 描述 该 组 件 的 功能 , 如 ion-view、 
ion-nav-bar、ion-side-menu-content 等 ; 属性 ( Attribute ) 组 件 没有 可 识别 的 前 级 ， 直 
接 用 多 个 单词 连接 描述 该 组 件 的 功能 ， 如 collection-repeat 、nav-transition 、 
nav-direction、 expose-aside-when、menu-toggle、menu-close、keyboard-attach 等 ; Ionic 
官方 文档 记录 的 CSS 类 型 指令 组 件 目前 总 共 只 有 1 个 : hide-on-keyboard-open。 

@ 服务 组 件 ( Service ): 可 在 控制 器 ( controller ) 或 服务 ( service ) 等 AngularJS 的 JavaScript 
代码 文件 中 被 注入 用 来 直接 创建 页 面 视图 组 件 或 执行 与 页 面 视图 的 指令 组 件 交 互 的 
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任务 。 服 务 组 件 的 特征 也 很 明显 ， 很 多 都 是 带 有 Sionic 前 组 的 Angular 服务 对 象 ， 如 
SIonicHistory 、 $IonicModal 、 $IonicPopover 、 SIonicActionSheet 、 $IonicPopup 、 
SIonicBackdrop 、 SIonicLoading 、 SIonicLoadingConfig 、 SIonicPlatform 、 
SIonicConfigProvider、S$IonicPosition 等 。 其 中 较为 特别 的 是 名 称 后 级 带 有 Delegate 
的 代理 类 服务 组 件 ， 如 SIonicScrollDelegate 、 S$IonicNavBarDelegate 、 
SIonicSideMenuDelegate、SIonicTabsDelegate、S$IonicListDelegate 等 。 


但 元 上 面 提 到 的 代理 类 服务 组 件 在 具体 的 使 用 上 也 比较 特殊 ， 这 类 组 件 大 都 有 

”SgetByHandle(delegateHandle) 的 方法 ， 可 用 于 获取 页 面 上 对 应 的 特定 指令 组 件 的 操作 对 
象 ， 从 而 达到 通过 代码 动态 控制 这 些 组 件 行为 或 外 观 的 目的 。 本 书 7.2.2 节 的 【示例 7-3】 
有 相关 内 容 可 供 读者 参考 。 





6.1.2 lonic 内 置 JS 组 件 与 CSS 样式 类 集成 


在 本 书 第 5 章 学 到 的 关于 Ionic 内 置 CSS 样式 类 是 可 以 和 Ionic 内 置 JavaScript 组 件 无 乡 
集成 使 用 的 , 前 者 用 于 调整 界面 元 素 的 显示 形态 与 位 置 , 而 后 者 与 标准 的 HTML 指令 (HTML 
Tags) 一 起 用 于 组 成 支撑 起 整个 界面 的 框架 结构 和 元 素 之 间 的 组 合 。 例 如 以 下 代码 片段 : 

【示例 6-1】Ionic 内 置 JavaScript 组 件 使 用 的 Ionic 内 置 CSS 样式 类 方法 
www\6.1.html 的 相关 代码 片段 





【代码 解析 和 onic 内 置 JavaScript 指 令 组 件 ion-header-bar 和 ion-content 都 分 别 使 用 了 Ionic 
内 置 CSS 样式 类 bar-positive 调整 了 固定 项 栏 颜色 和 has-header 调整 了 内 容 区 域 的 显示 范围 。 


be 不 除了 被 特殊 标注 出 来 的 地 方 ( 如 toggle_class) ， 可 以 直接 将 Ionic 内 置 CSS 样式 类 以 class 


属性 的 方式 作用 到 Ionic 的 指令 组 件 (Directive) 上 。 





6.1.3 lonic 内 置 JS 组 件 与 AngularJS 集成 


本 书 的 1.3.3 节 曾 介绍 过 Ionic 框架 是 构建 在 AngularJS 之 上 的 ， 因 此 Ionic 框架 所 带 的 所 
有 JavaScript 指令 组 件 都 能 与 AngularJS 自 带 的 指令 无 颖 整合 使 用 。 更 值得 一 提 的 是 ， 同 时 使 
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用 Ionic 和 AngularJS 的 指令 时 无 须 考虑 指令 的 优先 级 关系 ，Ionic 已 经 测试 好 了 这 一 切 。 即 类 
似 第 3 章 示 例 3-10 中 的 ng-repeat 指令 除了 能 与 <tr> 标 签 配合 使 用 外 ， 也 能 和 本 书 在 后 面 9.1.1 
节 介 绍 的 数据 项 指令 <ion-item> 标 签 一 起 使 用 。 在 本 书 第 13 和 14 章 将 能 看 到 更 多 的 Ionic 与 
AngularJS 框架 的 内 置 指令 和 外 部 引入 的 AngularJSs 组 件 融 为 一 体 一 起 使 用 的 场景 ， 这 是 使 用 
Ionic 框架 开发 的 巨大 优势 的 表现 。 

















@. .2 使 用 JS 组 件 的 常见 问题 解决 办 法 


在 使 用 Ionic 的 JS 组 件 进行 开发 时 ,常常 会 因为 代码 错误 或 是 实体 设备 与 浏览 器 的 区 别 遇 
到 各 种 各 样 的 问题 。 本 节 将 分 类 介绍 针对 这 些 常见 问题 对 应 的 解决 思路 与 办 法 。 





6.2.1 ”交互 调试 部 署 到 Android 设备 上 的 lonic 应 用 


由 于 实体 设备 与 浏览 器 之 间 存 在 本 质 区 别 ， 尤 其 是 本 书 第 11 章 介 绍 的 插件 集中 很 多 只 支 
持 Android 或 iOS 平台 ， 导 致 只 使 用 浏览 器 方式 是 无 法 验证 很 多 硬件 功能 的 ， 比 如 震动 、 设 备 
类 信息 等 。 因 此 在 开发 阶段 就 需要 经 常 把 未 完成 的 APP 应 用 通过 安装 apk 的 方式 〈 做 法 请 参 
考 本 书 2.3.7 节 ) 部 署 在 Android 设备 上 进行 实际 环境 的 测试 ， 以 验证 功能 的 正常 运行 。 
具体 做 法 是 当 apk 部 署 到 Android 设备 后 ， 在 Chrome 地 址 栏 输入 以 下 地 址 并 进入 : 
chrome://inspect/#devices 


如 果 Android 设备 正常 连接 到 了 开发 机 ， 则 会 显示 类 似 图 6.1 的 界面 。 图 中 可 以 看 到 有 两 
个 应 用 可 以 进行 连接 调试 , 这 两 个 应 用 分 别 是 本 书后 面 第 13、14 章 项 目 实战 生成 的 APP 应 用 。 

点 击 图 6.1 中 任意 应 用 项 目的 inspect 按钮 ， 则 会 打开 类 似 图 6.2 的 新 窗口 界面 。 这 时 就 可 
以 在 图 中 的 Console 窗口 内 看 到 调试 输出 的 日 志和 用 脚本 进行 调试 交互 操作 了 。 











本 目前 仅 Andtoid 设备 上 的 Ionie 应 用 支持 使 用 Chrome 来 进行 调试 ，iOS 设备 尚未 支持 。 | 











a 二 
了 neawewcverec > 
i € > © Dchrome//inspect/#devices 六 OO BBE:® "= 
DevTools Devices 
| = 一 Descover Ls dances [EGG 
HUAWEL MT7-TLOO “perwsizos 
WebView incomtesteasege (45.0.2454.95) 
BR V/ 
Ispact 


WebView in com ionicframework.salesrubyionic965369 (45.0.2454.95) 
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起 位 72 Sizel080 < 1740 
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图 6.1 使 用 Chrome 连接 部 署 到 Android 设备 上 的 Ionic 应 用 
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图 6.2 使 用 Chrome 调试 部 署 到 Android 设备 上 的 Ionic 应 用 


6.2.2 设备 上 显示 白 屏幕 错误 问题 调试 


在 移动 设备 上 部 署 了 Ionic 的 APP 应 用 之 后 ， 有 时 候 会 出 现 应 用 启动 后 (前面 的 闪 屏 正常 
显示 ) 主 界面 直接 显示 无 任何 内 容 的 白 屏幕 并 失去 任何 手势 响应 的 错误 。 这 类 错误 一 般 是 因为 
加 载 并 运行 JavaScript 文件 时 出 错 ， 导 致 AngularJS 初始 化 应 用 的 过 程 被 终止 ， 从 而 无 法 显示 
默认 页 面 的 HTML 文件 模板 造成 的 。 这 样 界面 里 显示 的 就 是 一 个 空白 HTML 页 。 

对 于 使 用 Android 设备 的 开发 者 来 说 ， 可 以 用 在 6.2.1 节 介绍 的 基于 Chrome 的 交互 调试 
方式 ， 随 后 在 Console 窗口 或 Network 窗口 里 发 现 日 志 输 出 的 错误 信息 ， 从 而 快速 定位 并 解决 
这 个 问题 。 

然而 对 于 1OS 设备 来 说 ,上 面 这 个 方式 无 法 使 用 。 这 时 我 们 可 以 使 用 Ionic CLI 提供 的 Live 
Reload 设备 调试 方式 来 尝试 解决 。 具 体 做 法 是 ， 在 使 用 iOS 设备 或 模拟 器 调试 Ionic 应 用 时 ， 
使 用 如 下 命令 : 


ionic run ios -1 -c 


| 命令 中 的 1 代表 livereload，c 代表 consolelogs。 | 


应 用 成 功 部 署 并 开始 运行 后 ， 将 会 把 出 错 的 日 志 信息 传 回 到 命令 行 窗口 ， 如 图 6.3 所 示 。 
图 中 的 错误 是 笔者 为 了 演示 起 见 在 启动 模块 里 加 入 了 一 个 不 存在 的 其 他 模块 〈《 取 名 为 bla) 依 
赖 而 导致 的 。 























图 6.3 使 用 Live Reload 方式 调试 iOS 设备 上 的 应 用 
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6.2.3 使 用 Batarang 进行 性 能 分 析 


基于 AngularJS 框架 的 Ionic 应 用 , 虽然 直接 享受 了 AngularJS 的 开 箱 即 用 和 双向 绑 定 的 特 
性 , 但 是 随 着 应 用 中 自 定义 指令 里 业务 逻辑 的 增长 、 数据 列表 里 海量 数据 项 出 现 和 复杂 表单 的 
控制 器 脚本 逻辑 ， 有 时 候 会 感到 APP 应 用 在 操作 时 页 面 表现 不 够 流畅 ， 对 用 户 的 操作 手势 有 
明显 的 卡 顿 。 这 种 情况 下 开发 人 员 往 往 需 要 便捷 的 profiling (性 能 分 析 ) 工具 来 辅助 找到 性 能 
瓶颈 点 ， 从 而 有 针对 性 地 优化 代码 或 数据 逻辑 。 

Google 为 AngularJS 框架 在 Chrome 里 提供 了 名 为 Batarang 的 性 能 分 析 工 具 , 使 用 它 可 以 

很 方便 地 查看 当前 页 面 里 的 作用 域 层级 数据 ， 并 显示 出 整个 作用 域 的 数据 模型 监控 树 (Watch 
Tree) 和 哪些 处 理 函 数 在 AngularJS 的 处 理 〈digest) 周期 中 占用 了 更 多 的 时 间 。 
Batarang 工具 的 安装 非常 简单 ， 在 Chrome 浏览 器 里 的 地 址 栏 里 输入 安装 网 址 
(https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpf 
k?hl=en) 或 直接 搜索 Batarang 安装 后 启用 即 可 。 

在 对 应 用 进行 性 能 分 析 时 ， 需 要 先进 入 Chrome 的 开发 者 工具 ， 在 该 工具 的 菜单 栏 点 击 
AngularJS 菜单 项 ， 并 在 出 现 的 窗口 中 选中 “Enable” 选 项 ， 即 为 当前 的 页 面 启动 了 Batarang 分 析 
功能 ， 如 图 6.4 所 示 。 图 中 显示 的 是 当前 页 面 的 整个 数据 模型 树 ， 正 如 标签 页 上 显示 的 “Models” 
所 示 。 一 般 来 说 ， 数 据 模 型 树 里 过 多 的 数据 项 会 导致 泻 染 过 程 的 拉 长 ， 从 而 影响 用 户 体验 。 这 时 
可 以 考虑 实现 数据 列表 的 分 页 加 载 机 制 ， 本 书 将 在 7.2.4 节 介绍 用 于 该 机 制 的 组 件 。 














5 2 i 
G5 locahosta1ons/app/say OOTDD. mrs 





Models for (79) 





图 6.4 使 用 Batarang 分 析 APP 当前 页 面 的 数据 模型 (作用 域 树 ) 


此 外 影响 前 台 页 面 响应 时 间 的 因素 也 可 能 是 数据 泻 染 或 处 理 函 数 。. 开 发 人 员 执行 该 部 分 的 
分 析 时 ， 可 以 在 Batarang 的 窗口 里 切换 到 “Performance” 标 签 页 ， 随 后 查看 页 面 泻 染 时 每 个 
作用 域 里 调用 到 的 函数 列表 与 页 面 里 函数 表达 式 的 执行 时 间 分 析 ， 如 图 6.5 所 示 。 图 中 排 在 越 
高 位 置 的 函数 耗 时 比例 也 越 长 ， 因 此 是 可 以 考虑 执行 优化 的 候选 对 象 。 
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图 6.5 使 用 Batarang 分 析 APP 当前 页 面 的 性 能 (监控 树 与 监控 表达 式 函 数 ) 


小 结 
本 章 首 先 介 绍 了 Tonic 的 JS 组 件 的 分 类 与 命名 规则 ,并 讨论 了 其 与 CSS 样 式 类 和 AngularJS 


集成 的 方法 。 此 外 在 常见 问题 一 节 介绍 了 开发 中 可 能 遇 到 的 一 些 问 题 的 解决 方法 。 
下 一 章 将 介绍 Ionic 的 内 置 布局 类 组 件 的 基础 知识 与 应 用 示例 。 
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< lonic 内 和 置 布局 类 组 件 > 








本 章 主要 介绍 Ionic 框架 中 用 于 布局 的 固定 标题 栏 (ion-header-bar 和 ion-footer-bar) 、 
内 容 展示 (ion-content)\ 内 容 滚动 (ion-scroll) 以 及 刷新 类 组 件 (ion-infinite-scroll 和 ion-refresher) 
的 使 用 。 掌 握 了 这 些 组 件 的 用 法 之 后 ， 一 个 APP 应 用 的 单个 页 面 基本 框架 就 能 轻易 实现 了 。 

本 章 主要 涉及 的 知识 点 有 : 

@ 固定 标题 栏 组 件 

@ 内容 显示 与 刷新 效果 相关 的 多 个 组 件 


























[二 | = 一 日 
固定 标题 栏 
本 节 介绍 的 两 个 组 件 与 本 书 5.2 节 固 定 标题 栏 介绍 的 CSS 组 件 功能 类 似 ， 都 是 用 在 页 面 


的 框架 布局 上 ,在 顶部 或 底部 放置 固定 标题 栏 ， 而 且 次 级 标题 栏 的 建立 还 依赖 于 本 书 5.2 节 固 
定 标题 栏 介绍 的 两 个 CSS 组 件 : .bar-subheader 和 .bar-subfooter。 








隔 元 为 ion-header-bar 和 ion-footer-bar 组 件 指定 CSS 类 的 时 候 无 须 再 加 上 .bar， 因 为 
”组件 本 身 在 创建 时 就 会 自动 加 上 CSS 类 .bar。 
使 用 了 ion-header-bar 和 ion-footer-bar 组 件 的 页 面 布 局 对 内 容 区 域 的 影响 与 CSS 组 件 类 
似 ， 需 要 为 内 容 显示 的 组 件 加 上 相关 标题 栏 存在 的 CSS 指示 类 。 具 体 用 法 可 参见 本 节 示 
例 。 











1 . ion-header-bar 指令 组 件 


用 途 : 在 内 容 区 域 顶部 添加 一 个 固定 标题 栏 ， 而 如 果 被 指定 了 .bar-subheader 类 ， 则 会 成 
为 一 个 次 级 顶 栏 (sub header) ，ion-header-bar 组 件 接口 及 其 说 明 如 表 7.1 所 示 。 





表 7.1 ion-header-bar 组 件 接口 及 其 说 明 


属性 /方法 /事件 说 明 








align-title 可 选 ，string 类 型 ， 用 于 设置 标题 对 齐 的 选项 。 可 用 : "le 人 t、'right' 和 'center' 分 别 表示 靠 
左 、 靠 右 和 中 间 对 齐 。 默认 为 对 齐 方 式 与 设备 平台 相关 (iOS 平 台 为 中 间 对 齐 , Android 
平台 靠 左 对 齐 ) 

Do-tap-scroll 可 选 ，boolean 类 型 ， 用 于 设置 是 否 取消 点 击 标题 栏 时 使 内 容 区 域 滚动 到 顶 
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2 . ion-footer-bar 指令 组 件 


用 途 : 在 内 容 区 域 底部 添加 一 个 固定 的 标题 栏 ， 而 如 果 被 指定 了 .bar-subfooter 类 ， 则 会 成 
为 一 个 次 级 底 栏 (sub footer) ，ion-footer-bar 组 件 接口 及 其 说 明 如 表 7.2 所 示 。 


表 7.2 ion-footer-bar 组 件 接口 及 其 说 明 


可 选 ，string 类 型 ， 用 于 设置 标题 对 齐 的 选项 。 可 用 : "ef 人、'right 和 'center' 分 别 表示 靠 
左 、 靠 右 和 中 间 对 齐 。 默 认 对 齐 方式 为 中 间 对 齐 
【示例 7-1】 演 示 了 固定 标题 栏 组 件 ion-header-bar 和 ion-footer-bar 的 使 用 方法 ， 效 果 如 
图 7.1 所 示 。 
wwww.1.html 的 相关 代码 片段 
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</body> 


【代码 解析 】 在 页 面 顶 部 用 ion-header-bar 创建 了 两 个 标题 栏 , 其 中 的 次 级 标题 栏 用 CSS 
类 .bar-subheader 声明 。 顶 级 标题 栏 内 部 还 创建 了 一 个 回 退 按钮 ， 点 击 后 将 执行 控制 器 
(controller) 里 的 方法 ， 通 过 $window 组 件 回 到 上 一 页 〈 即 示例 索引 页 ) 。 读 者 可 以 注意 到 代 
码 里 虽然 设置 了 顶 栏 标题 左 对 齐 , 但 是 因为 按钮 声明 在 先 , 标题 会 给 左边 的 按钮 留 出 空间 ， 从 
按钮 的 右边 开始 显示 。 如 果 调 整 顺 序 ， 把 按钮 声明 的 代码 放 在 标题 栏 文本 的 后 面 ， 那么 会 发 现 
按钮 将 会 被 摆 放 在 标题 栏 的 最 右边 ， 标 题 栏 文本 将 会 完全 置 左 。 















































医改 为 了 方便 集中 演示 ， 这 里 使 用 的 是 内 联 JavaScript 代码 的 方式 定义 了 控制 器 ， 实 际 开发 时 
【 建议 拆 分 到 单独 的 控制 器 代码 文件 里 ， 以 下 类 似 的 情况 下 也 是 如 此 。 











次 级 底 栏 





图 7.1 固定 标题 栏 组 件 





内 容 显示 相关 组 件 


本 节 介 绍 的 多 个 组 件 主要 关注 于 整个 页 面 的 内 容 区 域 部 分 ,除了 必 不 可 少 的 内 容 显示 组 件 
以 外 ， 也 有 与 移动 APP 特点 有 关 的 内 容 滚动 和 刷新 支持 组 件 。 掌 握 了 这 些 组 件 的 使 用 ， 就 能 
通过 组 件 的 简单 搭配 组 合 配置 来 提供 内 容 展示 功能 的 框架 了 。 




















为 了 便于 读者 的 学 习 理解 和 使 用 , 本 书 对 组 件 的 分 类 与 官方 网 站 稍微 有 所 区 别 ( 官 方 网 站 
里 内 容 组 件 只 包含 了 ion-content、ion-scroll 和 ion-pane 这 3 个 ) ， 只 要 是 跟 内 容 显 示 相 关 
| 的 组 件 都 被 放 在 本 节 一 起 介绍 并 通过 最 后 的 综合 示例 加 深 认 识 。 








7.2.1 内容 展示 容器 


ion-content 指令 组 件 提供 一 个 相对 易 用 的 内 容 区 域 。 通 过 设置 属性 overflow-scroll， 该 区 
域 的 滚动 处 理 可 以 用 Ionic 开发 的 滚动 视图 功能 ， 或 是 浏览 器 本 身 内 置 的 溢出 滚动 功能 。 在 大 
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多 数 情 况 下 ， 应 该 使 用 Ionic 的 滚动 视图 功能 ， 有 时 《比如 因为 性 能 的 要 求 ) 只 能 用 浏览 器 原 
生 的 溢出 滚动 才能 满足 要 求 。ion-content 组 件 接口 及 其 说 明 如 表 7.3 所 示 。 

ion-content 指令 内 可 以 包含 ion-refresher 指令 实现 内 容 区 域 下 拉 刷 新 ， 并 可 以 包含 
ion-infinite-scroll 指令 实现 无 限 滚动 。 相 关 的 具体 说 明和 示例 分 别 在 本 书 第 7.2.5 节 和 第 7.2.4 
节 可 以 找到 。 











ion-content 指令 组 件 会 建立 自己 的 AngularJS 子 作 用 域 (scope) ， 相 关 概 念 的 说 明 可 参考 
本 书 第 3.3 节 作用 域 (数据 模型 ) scope 的 介绍 。 

如 果 ion-content 指令 组 件 内 部 的 内 容 是 可 动态 更 新 的 ， 那 么 在 更 新 后 需要 通过 调用 
$ionicScrollDelegate 服务 代理 的 resize0 方 法 来 重新 计算 和 更 新 滚动 视图 。 








表 7.3 ion-content 组 件 接口 及 其 说 明 

















属性 /方法 /事件 说 明 

delegate-handle 可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicScrollDelegate 来 获取 本 组 件 内 部 滚动 视图 
对 象 的 句柄 名 称 。 使 用 方法 参见 本 书 7.2.2 节 

可 选 ，string 类 型 ， 设 置 可 滚动 的 方向 。 可 用 :'、 和 'xy' 分 别 表示 水 平 、 垂 直 和 
两 个 方向 的 滚动 。 默 认为 

可 选 ，boolean 类 型 ， 是 否 锁定 滚动 时 只 有 一 个 方向 。 当 需要 提供 手势 缩放 大 小 或 
者 双向 滚动 时 可 设 为 flse， 默 认 值 为 me 

padding 可 选 ，boolean 类 型 ， 是 否 为 显示 的 内 容 加 上 内 边 距 。iOS 的 默认 值 为 Hue，Android 
为 false 

可 选 ，boolean 类 型 ， 是 否 支持 内 容 滚动。 默认 值 为 tme 

可 选 ，boolean 类 型 ， 是 否 使 用 浏览 器 本 身 内 置 的 溢出 滚动 功能 ， 默 认 值 为 false。 
如 果 需 要 改变 整个 应 用 的 全 局 设置 ， 请 参考 本 书 10.2.1 节 





direction 





locking 















overflow-scroll 


scrollbar-x 可 选 ，boolean 类 型 ， 是 否 显示 水 平方 向 滚动 条 。 默 认 值 为 tme 
scrollbar-y 可 选 ，boolean 类 型 ， 是 否 显示 垂直 方向 滚动 条 。 默 认 值 为 tme 


可 选 ，string 类 型 ， 设 置 水 平方 向 初始 的 位 置 。 默 认 值 为 “0” 

start-y 可 选 ，string 类 型 ， 设 置 简直 方向 初始 的 位 置 。 默 认 值 为 “0” 

on-scroll 可 选 ， 事 件 表 达 式 类 型 ， 当 内 容 滚 动 时 触发 执行 事件 处 理 器 的 代码 〈 即 对 表达 式 
的 求 值 》 

on-scroll-complete 可 选 ， 事 件 表达 式 类 型 ， 当 内 容 深 动 停止 时 触发 执行 事件 处 理 器 的 代码 ， 触 发 时 
将 传 入 scrollLeft 和 scrollTop 两 个 局 部 变量 用 于 获得 当前 滚动 到 的 位 置 。 使 用 方法 
参见 本 小 节 示例 

has-bouncing 可 选 ，boolean 类 型 ， 滚 动 时 是 否 允 许 超出 并 弹 回 到 内 容 区 域 的 边界 。iOS 上 默认 
为 tue，Android 上 默认 为 false 

scroll-event-interval 可 选 ，number 类 型 ， 触 发 on-scroll 的 间隔 毫秒 数 。 默 认 值 为 10 


【示例 7-2】 演 示 了 内 容 展示 容器 ion-content 组 件 的 使 用 方法 ， 效 果 如 图 7.2 所 示 。 
www7.2.1.html 的 相关 代码 片段 
<script type="text/javascript"> 


// 内 联 方式 定义 内 容 区 Controller 
angular.module ('example') .controller('ContentController', function($scope) 






































// 初 始 化 内 容 区 数据 列表 
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$scope.items = _.map(_ .range(100),function(line){ 
return "这 是 第 " + line+" 行 ";}); 
//on-scroll 事件 处 理 
$scope.onscroll = function(){ 
console.1log("scrolling"); 
Fs 
//on-scroll-complete 事件 处 理 
$scope.onscrollComplete = function(scrollLeft, scrollTop) { 
console.log(scrollLeft + "," + scrollTop); 
ba 
| 
</script> 


<ion-content ng-controller="ContentController" on-scrol1="onScrol1l()" 
on-scroll-complete="onScrollComplete(scrollLeft, scrollTop)" > 
<ul class="list"> 
<1i class="item" ng-repeat="item in items">{{item}}</1i> 
</ul> 
</ion-content> 


【代码 解析 】 为 了 便于 摘出 关键 代码 ， 这 里 为 ion-content 创建 了 一 个 控制 器 ， 并 在 控制 
器 里 使 用 lodash 库 初 始 化 了 内 容 区 域 显 示 的 列表 数据 。 同 时 还 为 作用 域 加 上 onScroll 和 
onScrollComplete 成 员 处 理 on-scroll 和 on-scroll-complete 两 个 事件 。 这 里 只 完成 简单 的 数据 日 
志 输 出 作为 示例 。 这 里 使 用 的 lodash 库 的 map 函数 用 于 将 一 个 集合 通过 Javascript 函数 处 理 映 
射 成 另 一 个 集合 ， 而 range 函数 用 于 生成 指定 数字 范围 的 一 个 集合 。 

读者 可 以 试 着 上 下 滚动 内 容 区 域 的 列表 ， 随 后 将 在 日 志 面 板 里 看 到 相关 的 输出 变化 。 





图 7.2 内容 展示 容器 组 件 
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7.2.2 ”内 容 滚动 容器 


ion-scroll 指令 组 件 常用 来 创建 一 个 包含 所 有 内 容 的 可 滚动 容器 ， 它 的 使 用 相对 于 本 书 
7.2.1 节 介绍 的 内 容 展示 容器 ion-content 要 更 复杂 ， 然 而 该 容器 提供 了 在 同一 页 面 里 可 放置 多 
个 滚动 容器 和 精细 控制 缩放 等 功能 .如果 面临 的 需求 是 创建 一 个 位 于 页 面 中 间 的 常见 可 滚动 内 
容 区 域 ， 则 还 是 推荐 使 用 ion-content。ion-scroll 组 件 接口 及 其 说 明 如 表 7.4 所 示 。 














RS 
使 用 ion-scroll 指令 组 件 时 指定 组 件 的 高 度 与 其 内 部 内 容 元 素 的 高 度 ， 相 关 代码 可 参考 本 
小 节 的 【示例 7-3】。 


表 7.4 ion-scroll 组 件 接口 及 其 说 明 : 











属性 /方法 /事件 说 明 
delegate-handle 可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicScrollDelegate 来 获取 本 组 件 内 部 滚动 视图 
对 象 的 句柄 名 称 。 使 用 方法 参见 本 小 节 的 【示例 7-3】 


可 选 ，string 类 型 ， 设 置 可 滚动 的 方向 。 可 用 :'x、' 和 'xy' 分 别 表 示 水 平 、 午 直 和 
两 个 方向 的 滚动 。 默 认为 y 


可 选 ，boolean 类 型 ， 是 否 锁定 滚动 时 只 有 一 个 方向 。 当 需要 提供 手势 缩放 大 小 或 
者 双向 滚动 时 可 设 为 filse， 默 认 值 为 tme 

可 选 ，boolean 类 型 ， 滚 动 是 否 限制 分 页 ， 默 认 值 为 false 

可 选 ， 事 件 表达 式 类 型 ， 下 拉 刷 新 时 触发 ， 与 ion-refresher 配 合 使 用 

可 选 ， 事 件 表达 式 类 型 ， 当 内 容 滚动 时 触发 执行 事件 处 理 器 的 代码 《 即 对 表达 式 
的 求 值 ) 

可 选 ，boolean 类 型 ， 是 否 显 示 水 平方 向 深 动 条 。 默 认 值 为 tue 

可 选 ，boolean 类 型 ， 是 否 显示 乖 直 方向 滚动 条 。 默 认 值 为 tue 

可 选 ，boolean 类 型 ， 是 否 支持 双 指 缩放 

可 选 ，number 类 型 ， 人 允许 的 最 小 缩放 量 〈 默 认为 0.5) 

可 选 ，number 类 型 ， 允 许 的 最 大 缩放 量 《 默 认为 3) 

可 选 ，boolean 类 型 ， 滚 动 时 是 否 人 允许 超出 并 弹 回 到 内 容 区 域 的 边界 。iOS 上 默认 








为 tue，Android 上 默认 为 false 


【示例 7-3】 演 示 了 内 容 滚 动容 器 ion-scroll 组 件 的 使 用 方法 
www\7.2.2.html 的 相关 代码 片段 
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和 
Ds 
</script> 
<!-- 地 图 滚动 容器 --> 
<ion-scroll zooming="true" ng-controller="MapController" 
direction="xy" style="width: 100%; height: 380pzx;" class="has-header" 
delegate-handle="scroll map handle" ng-click="onMapClick()"> 
<div style="width: 5000px; height: 5000px; background: url ('img/demo map.png') 
repeat"></div> 
</ion-scroll> 
<!-- 餐厅 列表 滚动 容器 --> 
<ion-scroll direction="y" style="width: 100%; height: S10BR™ 
class="has-header" paging=true> 
<ul class="list" style="height: 310px"> 
<1li class="item" ng-repeat="item in items">{{item}}</1i> 
</ul> 
</ion-scroll> 


【代码 解析 】 效 果 如 图 7.3 和 7.4 所 示 ， 页 面 摆 放 了 两 个 ion-scroll 组 件 分 别 用 来 显示 在 上 方 
可 四 个 方向 滚动 的 地 图 和 在 下 方 只 能 上 下 滚动 的 列表 〈 都 通过 样式 设置 了 至 少 是 组 件 和 内 容 的 高 
度 ) 。 点 击 地 图 后 ，ng-click 触发 onMapClick 事件 处 理 器 将 调用 被 注入 的 服务 代理 
$ionicScrolDelegate 获取 上 方 地 图 当前 滚动 到 的 位 置 ， 模 拟 更 新 生成 到 下 方 列表 显示 的 数据 集合 里 。 








位 置 (611,530) 的 第 0 个 餐厅 
请 点 击 地 图 上 您 感 兴趣 的 位 置 





位 置 (611,530) 的 第 1 个 餐厅 


图 7.3 ”ion-scroll 组 件 -初始 状态 ”图 7.4 ”ion-scroll 组 件 -地 图 滚动 后 被 点 击 的 显示 








从 本 小 节 的 示例 读者 可 以 看 到 ion-scroll 与 ion-content 的 一 个 重要 区 别 就 是 页 面 里 一 般 只 
能 同时 显示 一 个 ion-content 组 件 ， 而 ion-scroll 支持 多 个 。 其 他 的 一 些小 的 区 别 如 支持 的 
事件 和 属性 读者 可 通过 对 比 两 者 的 组 件 接口 表 自 行 比较 。 


攻 :， 
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7.2.3 内容 容器 对 象 滚动 服务 


$ionicScrollDelegate 是 ion-content 或 ion-scroll 指令 组 件 创建 的 滚动 视图 的 服务 代理 。 它 提供 的 
方法 集 可 用 来 控制 这 些 滚动 视图 , 而 通过 它 的 SgetByHandle 方法 可 以 精细 到 控制 某 个 特定 的 滚动 视 
图 或 是 获取 视图 的 属性 。$ionicScrollDelegate 服务 代理 组 件 方法 及 说 明 如 表 7.5 所 示 。 


表 7.5 $ionicScrollDelegate 服 务 代 理 组 件 方法 及 其 说 明 














克 法 

resize 告诉 滚动 视图 由 于 内 容 容 器 的 内 容 更 新 ， 当 前 的 滚动 区 域 大 小 需要 重新 计算 

scrollTop([shouldAnimate]) 滚动 到 内 容 顶 部 。 可 选 的 shouldAnimate 参 数 为 tuelfalse， 表 示 是 否 使 用 动画 展 
示 过 程 

scrollBottom([shouldAnimate]) 

scrollTo(left, top, 滚动 到 指定 位 置 。left 和 top 分 别 表示 要 滚动 到 的 x 坐 标 和 y 坐 标 。shouldAnimate 

[shouldAnimate]) 参数 同 scrollTop() 方 法 

scrollBy(left, top, 滚动 指定 偏 移 量 。 left 和 top 分 别 表示 要 深 动 的 x 偏 移 量 和 y 偏 移 量 。shouldAnimate 

[shouldAnimate]) 参数 同 scrollTop() 方 法 

zoomTo(level, [animate], 缩放 到 指定 数字 级 别 。level 表 示 缩 放 到 的 级 别 ，animate 表 示 是 否 使 用 动画 展示 

[originLeft], [originTop]) 过 程 ，originLeft 和 originTop 分 别 表示 缩放 中 心 点 的 x 坐 标 和 y 坐 标 

zoomBy(factor, [animate], 继续 缩放 的 数字 级 别 。factor 表 示 继 续 缩放 乘 数 因 子 , animate 表 示 是 否 使 用 动画 

[originLeft], [originTop]) 展示 过 程 ，originLe 人 t 和 originTop 分 别 表示 缩放 中 心 点 的 x 坐标 和 y 坐 标 

getScrollPosition() 读 取 当 前 视图 位 置 。 返 回 值 为 一 个 JSON 对 象 ， 具 有 left 和 top 属 性 ， 分 别 表 示 x 


和 y 坐 标 

anchorScroll([shouldAnimate]) | 指示 滚动 视图 滚动 到 一 个 id 匹配 window.location.hash 的 元 素 。 如 果 没 有 匹配 到 
元 素 ， 它 会 滚动 到 顶部。shouldAnimate 参 数 同 scrollTop( 方 法 

freezeScroll([shouldFreeze]) 指示 某 个 滚动 视图 是 否 禁 止 滚动 

freezeAllScrolls([shouldFreeze]) 

getScrollView() 返回 与 服务 代理 组 件 对 应 的 滚动 视图 对 象 。 如 果 需 要 对 滚动 视图 进行 更 精细 的 
调整 ， 可 以 通过 返回 的 该 对 象 的 options 属 性 集 对 象 的 某 个 属性 进行 修改 。 可 供 
调整 的 属性 集 需 要 到 https://github.com/driftyco/ionic/blob/1.x/js/views/ 
scrollView.js 查 找 self.options 里 定义 的 所 有 可 用 属性 选项 

SgetByHandle(handle) 


7.2.4 加 载 新 内 容 滚动 触发 器 

ion-infinite-scroll 指令 组 件 用 于 为 滚动 容器 (ion-scroll 或 ion-content) 增加 滚动 到 或 接近 
底部 时 自动 触发 获取 数据 的 事件 函数 来 加 载 新 内 容 的 功能 。 

当 用 户 向 下 滚动 到 与 底部 的 距离 小 于 设 定 的 distance 的 数值 时 ， 就 会 触发 on-infinite 指定 
的 事件 函数 。 

ion-infinite-scroll 指令 组 件 适 用 于 无 限 数据 查询 搜索 类 页 面 〈 即 瀑布 流 模式 ) ， 当 用 户 需 
要 获取 更 多 的 内 容 数据 时 , 滚动 到 内 容 区 域 底部 , 等 待 加 载 刷 新 完毕 后 获取 的 数据 即 出 现在 内 
容 的 底部 。ion-infinite-scroll 组 件 接口 及 其 说 明 如 表 7.6 所 示 。 





























on-infinite 事件 的 处 理 函 数 在 完成 新 内 容 数 据 的 加 载 后 需要 广播 
scrolLinfiniteScrollComplete 事件 ， 通 知 包容 ion-infinite-scroll 的 内 容 容 器 更 新 滚动 视图 。 
相关 代码 可 参考 本 小 节 的 【示例 7-4】。 


一 -一 
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表 7.6 ion-infinite-scroll 组 件 接口 及 其 说 明 


属性 /方法 /事件 
a ite 必 填 ， 事 件 表达 式 类 型 ， 当 内 容 滚动 到 底部 时 触发 的 事件 〈 即 对 表达 式 的 求 值 ) 。 
使 用 方法 参见 本 小 节 的 【示例 7-4】 


可 选 ，boolean 类 型 ， 设 置 是 否 在 页 面 加 载 时 马上 出 发 滚动 到 底 事件 


【示例 7-4】 演 示 了 组 件 ion-infinite-scroll 的 使 用 方法 ， 效 果 如 图 7.5 和 7.6 所 示 。 
Www\7.2.4.html 的 相关 代码 片段 
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</ion-content> 


【代码 解析 】 页 面 的 内 容 展示 容器 里 嵌入 了 一 个 ion-infinite-scroll 组 件 。 内 容 展 示 容 器 的 
控制 器 设置 了 当 ion-infinite-scroll 组 件 被 下 拉 触 发 更 新 滚动 列表 后 模拟 延 时 加 载 数据 。 连 续 加 
载 3 次 数据 后 ， 通 过 AngularJS 的 标准 ng- 让 指令 隐藏 ion-infinite-scroll 组 件 并 同时 显示 “没有 
更 多 数据 了 ”的 提示 列表 项 。 请 特别 注意 在 更 新 完 $scope.items 所 代表 的 列表 数据 后 ， 代 码 里 
调用 了 $scope.$broadcast('scrollinfiniteScrollComplete) 来 通知 内 容 展示 容器 更 新 滚动 视图 。 此 
外 这 里 被 使 用 的 lodash 库 的 concat 函数 是 用 于 将 多 个 数据 集合 并 。 














加 载 新 内 容 ion-infinite-scroll 加 载 新 内 容 ion-infinite-scroll 


第 1 批 数据 ， 数 据 行 4 
第 0 批 数据 ， 数 据 行 10 

第 2 批 数 据 ， 数 据 行 0 
第 0 批 数据 ， 数 据 行 11 

第 2 批 数 据 ， 数 据 行 1 
第 0 批 数据 ， 数 据 行 12 

第 2 批 数 据 ， 数 据 行 2 
第 0 批 数据 ， 数 据 行 13 

第 2 批 数据 ， 数 据 行 3 
第 0 批 数据 ， 数 据 行 14 

第 2 批 数 据 ， 数 据 行 4 
第 0 批 数据 ， 数 据 行 15 

第 3 批 数 据 ， 数 据 行 0 
第 0 批 数据 ， 数 据 行 15 

第 3 批 数据 ， 数 据 行 1 
第 0 批 数据 ， 数 据 行 17 

第 3 批 数据 ， 数 据 行 2 
第 0 批 数 据 ， 数 据 行 18 

第 3 批 数 据 ， 数 据 行 3 
第 0 批 数据 ， 数 据 行 19 

第 3 批 数据 ， 数 据 行 4 


没有 更 多 数据 了 





图 7.5 ion-infinite-scroll 组 件 -加载 时 的 显示 图 7.6 ion-infinite-scroll 组 件 -无 更 多 数据 时 隐藏 的 显示 


7.2.5 下 拉 刷 新 组 件 


ion-refresher 指令 组 件 用 于 为 滚动 容器 (ion-scroll 或 ion-content) 增加 下 拉 刷 新 滚动 视图 
的 功能 。 使 用 ion-refresher 时 ， 它 需要 作为 ionContent 或 ionScroll 元 素 的 第 一 个 子 元 素 。 

ion-refresher 指令 组 件 适 用 于 新 闻 类 页 面 ， 当 用 户 需要 获取 最 新 的 内 容 数 据 时 ， 等 待 加 载 
刷新 完毕 后 最 新 的 数据 即 出 现在 下 拉 内 容 区 域 的 顶部 。ion-refresher 组 件 接口 及 其 说 明 如 表 7.7 
所 示 。 






































on-refresh 事件 的 处 理 函 数 在 完成 新 内 容 数 据 的 加 载 后 需要 广播 scroll.refreshComplete 事 
\ 件 , 通 知 包容 ion-refresher 的 内 容 容 器 更 新 滚动 视图 ,相关 代码 可 参考 本 小 节 的 [示例 7-5】。 
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表 7.7 ion-refresher 组 件 接口 及 其 说 明 













属性 /方法 /事件 
on-refresh 


pulling-icon 


属性 代 蔡 


可 选 ，string 类 型 ， 当 加 载 时 显示 的 轮转 等 待 指示 框 
可 选 ，boolean 类 型 ， 设 置 是 否 禁止 下 拉 图 标 旋转 动画 ， 需 要 与 pulling-icon 一 起 使 





可 选 ， 事 件 表达 式 类 型 ， 当 用 户 向 下 拉动 足够 的 距离 并 松 开 时 触发 的 事件 〈 即 对 
表达 式 的 求 值 ) 。 使 用 方法 参见 本 小 节 的 【示例 7-5】 

可 选 ,事件 表达 式 类 型 ， 当 用 户 开始 向 下 拉动 时 触发 的 事件 ( 即 对 表达 式 的 求 值 ) 
可 选 ，string 类 型 ， 当 用 户 向 下 拉动 时 显示 的 文本 

可 选 ，string 类 型 ， 当 用 户 向 下 拉动 时 显示 的 图 标 。 默 认 : 'ion-loading-d'。 该 属性 已 
不 推荐 使 用 ， 而 建议 用 spinner 属 性 代 蔡 

当 用 户 向 下 拉动 并 松 开 后 ， 显 示 的 等 待 图 标 。 该 属性 已 不 推荐 使 用 ， 而 建议 用 spinner 






























【示例 7-5】 演 示 了 组 件 ion-refresher 的 使 用 方法 ， 效 果 如 图 7.7 和 7.8 所 示 。 
www\7.2.5.html 的 相关 代码 片段 
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【代码 解析 】 页 面 的 内 容 展示 容器 里 嵌入 了 一 个 ion-refresher 组 件 作为 第 一 个 子 元 素 。 内 

容 展示 容器 的 控制 器 设置 了 当 ion-refresher 组 件 被 下 拉 触 发 更 新 滚动 列表 后 模拟 延 时 加 载 数 据 

(并 在 新 数据 里 注 明 了 数据 时 间 ) ， 而 指令 里 的 on-refresh 属性 设置 了 对 这 个 事件 函数 

loadNewData 的 调用 。 请 特别 注意 在 更 新 完 $scope.items 所 代表 的 列表 数据 后 ， 代 码 里 调用 了 
$scope.$broadcast('scrollrefreshComplete) 来 通知 内 容 展 示 容 器 更 新 滚动 视图 。 





















































下 拉 刷 新 组 件 ion-refresher 


下 拉 刷 新 组 件 ion-refresher 


更 新 数据 ， 数 据 行 0 一- 数据 时 间 ， 下 午 155:31 
更 新 数据 ， 数 据 行 1--- 数 据 时 间 ， 下 午 1:55:31 
初始 数据 ， 数 据 行 0 更 新 数据 ， 数 据 行 2 一 -数据 时 间 ， 下 午 155:31 


初始 数据 ， 数 据 行 1 


更 新 数据 ， 数 据 行 3--- 数 据 时 间 ， 下 午 1:55:31 


初始 数据 ， 数 据 行 2 更 新 数据 ， 数 据 行 4--- 数 据 时 间 ， 下 午 1:55:31 





初始 数据 ， 数 据 行 3 初始 数据 ， 数 据 行 0 





sj 。 站 所 拭 


图 7.7 ion-refresher 组 件 -加 载 时 的 显示 图 7.8 ion-refresher 组 件 -加 载 完 成 后 新 数据 行 的 显示 


小 结 





本 章 介绍 了 Ionic 框架 中 用 于 布局 的 固定 标题 栏 、 内 容 展示 、 内 容 滚动 以 及 刷新 类 组 件 的 
使 用 与 示例 。 掌 握 了 这 些 组 件 的 用 法 之 后 ， 一 个 APP 应 用 的 单个 页 面 基本 框架 就 能 轻易 实现 
了 。 

下 一 章 将 介绍 Ionic 的 内 置 导航 类 组 件 的 基础 知识 与 应 用 示例 ， 这 些 组 件 用 来 连接 单个 页 
面 ， 从 而 完成 应 用 的 页 面 切换 效果 。 
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在 第 7 章 介绍 了 单独 的 一 个 页 面 里 如 何 动态 获取 与 滚动 显示 内 容 ， 这 是 一 个 APP 最 基础 
的 功能 。 然 而 一 个 成 熟 的 移动 APP 对 用 户 在 视觉 上 来 说 一 般 是 由 多 个 可 以 互相 跳 转 的 功能 或 
者 内 容 页 面 组 成 的 。 为 了 达到 页 面 跳 转 变换 的 功能 ，Ionic 基于 Angular UI Router 组 件 实现 了 








用 于 页 面 导 航 切换 的 几 类 组 件 ， 可 用 于 完成 如 图 8.1 中 的 多 种 导航 要 素 。 本 章 将 详细 解析 这 些 
组 件 的 功能 和 使 用 方式 。 


侧 栏 菜单 
显示 切换 















€ MU5690 BS 签到 
3 我 的 证 件 
呼和浩特 上 
了 我 的 常客 卡 
习 订单 管理 
€ MU5690 
到 达 
呼和浩特 少 
€ MU5459 精品 应 用 推荐 
到 达 
上 泡 
地 机 | | 二 





侧 栏 菜单 
图 8.1 页 面 导航 切换 的 几 类 组 件 
本 章 主要 涉及 的 知识 点 有 : 
@ 导航 (Navigation ) 相关 组 件 
@ ”选项 卡 相 关 组 件 
@ ” 侧 栏 菜单 相关 组 件 





号 . | 导航 框架 相关 组 件 


本 节 介 绍 的 多 个 组 件 可 用 于 支持 移动 APP 页 面 视图 的 嵌 套 与 切换 操作 ， 以 及 控制 撕 套 与 
切换 操作 过 程 。 掌 握 了 解 这 些 组 件 的 使 用 方法 是 学 习 本 书 8.2 选项 卡 和 8.3 侧 栏 菜单 相关 组 件 
两 节 的 基础 。 


8.1.1 导航 视图 容器 与 视图 
当 用 户 在 APP 中 浏览 切换 不 同 视图 时 , Ionic 保持 跟踪 保存 用 户 的 浏览 历史 。 通过 这 一 点 ， 
当 用 户 用 手指 在 页 面向 左 或 向 右 滑动 时 ，Ionic 将 正确 地 处 理 视图 间 的 转换 ， 比 如 回 退 到 上 一 
视图 或 返回 上 一 层 功 能 。 
Ionic 打包 使 用 了 Angular-UI 项 目的 路 由 模块 (angular-ui-router)。 该 模块 使 APP 的 界面 可 
以 划分 成 不 同 的 状态 (state) 。 这 些 状 态 可 以 被 命名 、 媒 套 ， 以 及 通过 页 面 模板 〈 同 时 ) 显示 
在 页 面 上 。 限 于 篇 幅 原 因 ， 本 书 不 介绍 angular-ui-router 的 所 有 功能 ， 有 兴趣 的 读者 可 以 到 
https://github.com/angular-ui/ui-router/wiki 阅读 相关 资料 。 
Ionic 使 用 ion-nav-view 指令 组 件 在 APP 中 泻 染 页 面 模板 ，ion-nav-view 组 件 接口 及 其 说 
明 如 表 8.1 所 示 。 页 面 模板 是 状态 的 一 部 分 ， 状 态 通常 会 被 映射 到 一 个 URL 上 。 这 些 设置 、 
定义 和 映射 都 是 通过 angular-ui-router 提供 的 $stateProvider 服务 编程 来 实现 。 本 节 的 示例 8-1 
通过 代码 说 明了 它 的 使 用 方式 。 























一 Ionic 使 用 ion-nav-view 指令 封装 代替 了 angular-ui-router 原生 提供 的 ui-view 指令 。 以 前 
使 用 过 angular-ui-router 的 读者 只 要 记 住 原来 放置 ui-view 指令 的 位 置 将 由 ion-nav-view 取 
代 即 可 。 











表 8.1 ion-nav-view 组 件 接口 及 其 说 明 





属性 /方法 /事件 ”说 明 

name 可 选 ，string 类 型 ， 指 定 视图 容器 的 名 字 。 这 个 名 字 应 该 是 在 相同 的 状态 下 所 有 视图 容器 
中 唯一 的 。 不 同 的 状态 中 可 以 有 相同 名 称 的 视图 容器 。 这 个 属性 一 般 是 在 页 面 同时 显示 
多 个 页 面 模板 的 场景 下 使 用 。 具 体 的 用 法 可 参见 angular-ui-router 的 在 线 帮助 文档 : 
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view 





在 Ionic 中 ,为 了 与 导航 框架 相关 组 件 保持 兼容 ,一般 需要 使 用 指令 ion-view 来 作为 每 个 
页 面 模板 的 最 外 层 容 器 (这 是 使 用 我 们 将 在 本 书 8.1.2 节 介 绍 的 ion-nav-bar 指令 来 动态 生成 导 
航 栏 的 前 提 条 件 ) ， 并 通过 设置 它 的 属性 来 定制 因为 状态 变化 而 被 动态 载 入 的 页 面 模板 视图 ， 
ion-view 组 件 接口 及 其 说 明 如 表 8.2 所 示 。 此 外 页 面 模板 视图 从 被 载 入 、 进 入 到 退出 的 生命 周 
期 里 , 关键 节点 的 事件 可 以 在 控制 器 里 捕获 。 本 节 的 示例 8-1 通过 代码 说 明了 ion-view 的 使 用 
方式 。 
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表 8.2 ion-view 组 件 接口 及 其 说 明 








属性 /方法 /事件 说 明 

可 选 ，string 类 型 ， 显 示 在 父 ion-nav-bar 的 标题 。 使 用 方法 参见 本 小 节 的 【 示 
例 8-1】 

可 选 ，boolean 类 型 ， 视 图 是 否 允许 被 缓存 。 默 认为 true 

可 选 ，boolean 类 型 ， 在 当前 视图 是 否 允许 通过 手势 操作 返回 上 一 视图 。 默 
认为 tme 

可 选 ，boolean 类 型 ， 是 否 在 父 ion-nav-bar 隐 藏 后 退 按钮 

可 选 ，boolean 类 型 ， 是 否 隐藏 父 ion-nav-bar 

事件 ， 视 图 载 入 时 触发 

事件 ， 完 成 进入 视图 后 厦 用 

事件 ， 完 成 离开 视图 后 触发 

事件 ， 进 入 视图 前 触发 

事件 ， 离 开 视 图 前 触发 

事件 ， 完 成 进入 视图 后 触发 

事件 ， 完 成 离开 视图 后 触发 

事件 ， 此 时 视图 的 控制 器 已 被 销毁 ， 视 图 的 元 素 也 己 从 DOM 中 移 除 

事件 ， 

事件 ， 离 开 父 视图 后 触发 

事件 ， 进 入 父 视图 前 触发 

事件 ， 离 开 父 视图 前 触发 

事件 ， 完 成 进入 父 视图 后 触发 

事件 ， 完 成 离开 父 视图 后 触发 





【示例 8-1】 演 示 了 组 件 ion-nav-view & ion-view 的 使 用 方法 
www\8.1.1.html 的 相关 代码 片段 





1 
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<!-- 页 面 模板 : sports .html， 状 态 为 home 时 被 插入 至 ion-nav-view--> 
<script id="sports.html" type="text/ng-template"> 
二 视图 性 > 
<ion-view view-title=" 体 育 "> 
<ion-content class="padding"> 
<a class="button ion ion-home" ui-sref="home"> 返回 首页 </a> 
<a class="button ion ion-music-note" ui-sref="music"> 转 至 音乐 频道 </a> 
</ion-content> 
</ion-view> 
</script> 
</body> 














【代码 解析 】JavaScript 代码 里 使 用 angular-ui-router 的 $stateProvider 声明 了 home music、 
sports 状态 分 别 对 应 APP 的 首页 、 音 乐 频道 和 体育 频道 3 个 视图 页 。APP 初始 进入 时 ， 应 该 
显示 首页 ， 如 图 8.2 所 示 。 因 此 在 整个 页 面 的 控制 器 NavController 中 使 用 了 angular-ui-router 
提供 的 $state 服务 对 象 直接 将 状态 设 为 home， 即 首页 状态 。 为 了 举例 说 明 视 图 事件 ， 为 music 
状态 创建 并 设置 了 控制 器 MusicController。 该 控制 器 将 在 视图 进入 的 时 候 输出 事件 相关 的 数据 
到 控制 台 ， 参 见 图 8.3 的 下 方 输出 内 容 部 分 。 这 3 个 状态 均 使 用 内 联 Angular 页 面 模板 的 方式 

(类 似 <script id="music.html" type="textng-template"> 的 标记 ) 直接 定义 了 视图 的 显示 内 容 。 
读者 请 注意 每 个 视图 的 最 外 层 使 用 ion-view 指令 包 庄 内 容 ， 并 通过 设置 view-title 属性 在 视图 
被 激活 时 动态 更 改 顶部 导航 栏 ion-nav-bar 显示 的 标题 。ion-nav-bar 中 还 嵌入 了 
ion-nav-back-button 用 于 在 浏览 到 不 同 页 面 时 保持 浏览 历史 ， 自 动 提供 返回 前 一 视图 的 功能 。 
图 8.3 与 图 8.4 中 ,顶部 导航 栏 的 左 侧 自动 出 现 了 返回 按钮 ,并 提示 返回 的 视图 名 称 ,ion-nav-bar 
和 ion-nav-back-button 的 说 明 可 参考 本 书 8.1.2 节 。 


















































视图 里 的 跳 转 链接 标记 <a> 里 ， 读 者 可 以 发 现 链接 地 址 不 是 使 用 HTML 标准 的 href 属性 ， 
而 是 ui-sref。 这 是 推荐 使 用 的 angular-ui-router 进行 状态 跳 转 的 标准 方式 ， 具 体 说 明 可 参 
考 本 小 节 提供 的 angular-ui-router 的 官方 网 站 文档 。 


一 








转 至 音乐 频道 


人 苇 至 体育 频道 





图 8.2 导航 的 首页 
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用 转 至 音乐 频道 


售 并 至 体育 频道 





图 8.3 ”导航 的 音乐 视图 (显示 了 进入 事件 的 相关 数据 ) 图 8.4 导航 的 跳 转 到 首页 视图 





图 84 显示 在 跳 转 到 首页 视图 后 ， 返 回 按钮 显示 了 可 返回 上 一 视图 一 一 “体育 ”。 这 是 因 
[ 为 到 达 首 页 的 方式 是 通过 内 容 区 的 链接 而 不 是 返回 按钮 , 因此 导航 框架 将 这 个 行为 处 理 成 





继续 浏览 操作 而 不 是 返回 历史 操作 。 








8.1.2 ”定制 顶部 导航 栏 


1 .ion-nav-bar 指令 组 件 
在 8.1.1 节 的 示例 8-1 中 ， 读 者 已 经 开始 了 解 了 ion-nav-bar 的 主要 功能 :一 个 顶级 的 
ion-nav-view 指令 可 以 对 应 创建 一 个 ion-nav-bar 指令 在 视图 上 显示 一 个 顶部 导航 栏 。 当 程序 状 
态 改 变 时 这 个 顶部 导航 栏 将 会 根据 状态 进行 相应 更 新 。 在 示例 8-1 中 ，ion-nav-bar 中 还 放 入 了 
-个 ion-nav-back-button 来 添加 一 个 动态 显示 的 后 退 按钮 。ion-nav-bar 组 件 接口 及 其 说 明 如 表 
8.3 所 示 。 在 本 小 节 里 ， 将 进一步 介绍 用 ion-nav-buttons 为 特定 视图 添加 多 个 按钮 以 及 使 用 
$ionicNavBarDelegate 通过 编程 方式 控制 顶部 导航 栏 的 方法 。 






































经 笔者 测试 ， 目 前 版 本 的 ion-nav-bar 只 对 .bar-subheader 有 反应 ， 无 法 使 用 Ionic 的 内 置 
| 和 CSS 样式 类 .bar-footer 和 .bar-subfooter 放置 在 底部 ， 因 此 称 ion-nav-bar 为 顶部 导航 栏 。 
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表 8.3 ion-nav-bar 组 件 接口 及 其 说 明 








属性 /方法 /事件 
delegate-handle 
align-title 


说 明 
可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicNavBarDelegate 来 获取 本 组 件 对 象 的 句柄 名 称 
可 选 ，string 类 型 ， 用 于 设置 标题 对 齐 的 选项 。 可 用 : "lefp、 right 和 'center 分 别 表示 靠 
左 、 靠 右 和 中 间 对 齐 。 默 认为 'center' 

可 选 ，boolean 类 型 ， 用 于 设置 是 否 取消 点 击 标题 栏 时 使 内 容 区 域 滚动 到 项 


2 . ion-nav-title 指令 组 件 


顶部 导航 栏 中 默认 显示 所 载 入 模板 视图 的 view-tile 属性 值 ，Ionic 允许 我 们 使 用 
ion-nav-title 指令 ， 使 用 任意 的 HTML 片段 定制 其 内 容 ， 如 图 片 。 本 小 节 的 示例 8-2 中 有 相关 
的 应 用 演示 。 
























no-tap-scroll 











起 ion-nav-title 必须 是 ion-view 或 ion-nav-bar 的 直接 后 代 。 | 











3 . ion-nav-back-button 指令 组 件 


在 8.1.1 节 的 示例 8-1 中 , 读者 已 经 开始 了 解 了 ion-nav-back-button 的 主要 功能 : 当 用 户 在 
当前 导航 堆栈 能 够 后 退 时 ， 将 在 顶部 导航 栏 上 显示 后 退 按钮 。ion-nav-back-button 组 件 是 按钮 
类 组 件 ， 因 此 可 以 使 用 本 书 5.3 说 明 的 Ionic 内 置 按钮 CSS 类 、 设 置 按 钮 文字 以 及 通过 定义 
ng-click 属性 来 响应 事件 。 本 小 节 的 示例 8-2 中 有 相关 的 应 用 演示 。 

4 . ion-nav-buttons 指令 组 件 

在 Ionic 的 导航 框架 中 ， 导 航 栏 是 公共 资源 : 随 着 视图 的 切换 ， 导 航 栏 的 显示 内 容 完全 由 
当前 的 活动 视图 决定 。 因 此 Ionic 提供 了 在 不 同 的 状态 下 《〈 即 载 入 不 同 的 模板 视图 时 ) ， 通 过 
ion-nav-buttons 指令 在 导航 栏 上 显示 一 些 不 同 的 按钮 组 的 功能 。 当 ion-nav-buttons 指令 作为 
ion-view 或 ion-nav-bar 指令 的 直接 后 代 时 ， 里 面 定义 的 按钮 会 依次 根据 side 属性 创建 并 放置 
到 顶部 导航 栏 。ion-nav-buttons 组 件 接口 及 其 说 明 如 表 8.4 所 示 。 


表 8.4 ion-nav-buttons 组 件 接口 及 其 说 明 





属性 /方法 /事件 ”说 明 

side 可 选 ，string 类 型 ， 在 导航 栏 中 按钮 组 被 放置 的 位 置 。 可 选项 为 : primary、secondary、 
left 或 right。Ionic 官 方 文档 推荐 在 一 般 情况 下 使 用 前 两 个 ， 因 为 这 样 框架 会 根据 所 属 
的 设备 平台 自动 决定 按钮 组 放置 在 左边 还 是 右边 





5 . $ionicNavBarDelegate 服务 代理 


提供 了 控制 顶部 导航 栏 的 脚本 接口 。 
SionicNavBarDelegate 服务 代理 组 件 方法 集 : 


@ align ([direction]) 


带 有 按钮 的 标题 对 齐 到 指定 的 方向 。 可 选 的 string 类 型 的 direction 参数 表示 标题 文字 对 齐 
的 方向 ， 可 选项 为 ltft、right、center， 默 认 值 : center。 
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® showBackButton ([show]) 


设置 或 获取 ion-nav-back-button 是 否 显示 (如 果 它 存在 并 且 在 当前 状态 下 有 效 ) 。 可 选 的 
boolean 类 型 的 show 参数 表示 是 否 显 示 。 


@ showBar([show]) 

设置 或 获取 ion-nav-bar 是 否 显示 。 可 选 的 boolean 类 型 的 show 参数 表示 是 否 显示 。 
® tite(tite) 

设置 ion-nav-bar 显示 的 文本 。 





【示例 8-2】 在 【示例 8-1】 的 代码 上 修改 增加 了 演示 其 他 组 件 的 使 用 方法 ， 效 果 如 图 8.5 
所 示 。 


Www\8.1.2.html 的 相关 代码 片段 
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> 转 至 体育 频道 </a> 
</ion-content> 
</ion-view> 

</script> 

【代码 解析 】 JavaScript 代码 里 控制 器 使 用 $ionicNavBarDelegate 的 showBar 方法 定义 了 
隐藏 顶 栏 的 操作 实现 。 更 改 后 的 音乐 频道 视图 的 页 面 模板 使 用 ion-nav-title 定义 顶部 导航 栏 显 
示 图 片 标题 。 同 时 在 顶部 导航 栏 右 侧 使 用 ion-nav-buttons 增加 了 两 个 按钮 。 其 中 文字 为 “隐藏 
顶 栏 ”的 按钮 将 触发 控制 器 里 对 应 的 隐藏 项 栏 的 实现 代码 。 








会 返回 首页 。 @ 转 至 体育 频道 


合 返回 首页 。 @ 转 至 体育 频道 








图 8.5 定制 顶部 导航 栏 与 隐藏 操作 后 示例 


8.1.3 浏览 历史 服务 

$ionicHistory 用 于 追踪 用 户 使 用 APP 时 的 视图 浏览 历史 。 浏 览 器 记录 访问 历史 的 行为 方 
式 是 通过 唯一 一 个 线性 历史 记录 表 跟 踪 以 前 的 视图 、 当 前 视图 和 下 一 个 视图 如果 有 的 话 ) 。 
然而 在 移动 APP 使 用 选项 卡 〈 也 称 标签 页 ) 或 侧 栏 菜单 管理 并 显示 可 同时 并 行 切换 的 视图 集 
的 情况 下 ， 浏 览 器 的 单一 线性 历史 记录 表 就 不 能 满足 使 用 需要 了 。 

因此 不 同 于 浏览 器 的 默认 实现 ， 移 动 APP 需要 为 每 个 选项 卡 或 侧 栏 菜单 成 员 并 行 维护 单 
独 的 浏览 历史 记录 〈History) 。 这 样 能 达到 的 效果 就 是 ， 如 果 用 户 在 某 一 选项 卡 A 下 浏览 跳 
转 了 多 个 页 面 的 情况 下 ， 然 后 切换 到 另 一 个 选项 卡 B 后 ， 这 时 顶部 导航 栏 的 返回 按钮 (如 果 
存在 ) 在 被 用 户 按 下 后 跳 转 到 的 页 面 视图 还 将 是 属于 选项 卡 B 的 。 

简单 来 说 ，$ionicHistory 就 是 Ionic 设计 出 来 用 于 管理 上 文 所 描述 的 APP 并 行 浏览 历史 记 
录 的 。$ionicHistory 服务 代理 组 件 方法 及 其 说 明 如 表 8.5 所 示 。 











表 8.5 $ionicHistory 服 务 代理 组 件 方法 集 及 其 说 明 











方法 
ViewHistoryO 








返回 视图 访问 历史 数据 
currentViewO 返回 当前 视图 对 象 
currentHistoryId0 返回 当前 历史 ID 
currentTitle([val]) 设置 或 读 取 当前 视图 的 标题 
backView0 返回 历史 栈 中 前 一 个 视图 对 象 。 如 果 是 从 视图 A 跳 转 到 视图 B， 那 么 视图 A 就 是 
视图 B 的 前 一 个 视图 对 象 
backTitle0) 返回 历史 栈 中 前 一 个 视图 的 标题 
forwardView0) 返回 历史 栈 中 的 下 一 个 视图 对 象 
currentStateName() 返回 当前 所 处 状态 名 
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removeBackView() 删除 历史 栈 中 前 一 个 视图 对 象 

goBack([backCount]) 切换 返回 到 历史 栈 中 前 面 的 视图 。 参 数 backCount 需 要 为 负 值 ， 表 示 往 前 
对 于 当前 视图 的 第 几 个 ;默认 值 为 -1 

clearHistoryO) 清空 APP 的 整个 历史 栈 ， 但 保持 当前 视图 























clearCache() 将 每 一 个 ion-nav-view 缓 存 的 视图 都 清空 ， 包 括 移 除 DOM 及 绑 定 的 作用 域 对 象 


(scope) 


nextViewOptions(options) | 设置 后 续 视 图 切换 的 选项 。 参 数 options 是 一 个 JavaScript 对 象 ， 其 中 可 选 的 属性 
分 别 有 : disableAnimate 一 一 在 后 续 的 转 场 中 禁止 动画 ，disableBack 一 一 后 续 的 
视图 将 不 能 回 退 :historyRoot 一 一 下 一 个 视图 将 作为 历史 栈 的 根 节点 





号 ,2 选项 卡 相关 组 件 


通过 阅读 本 书 5.10 节选 项 卡 栏 , 读者 应 该 已 经 从 外 观 上 了 解 了 选项 卡 以 及 通过 Ionic 的 内 
置 CSS 样式 类 进行 外 观 定制 。 然而 仅 通过 标准 的 HTML 指令 和 CSS 样式 类 是 无 法 完成 最 基 
础 的 选项 卡 之 间 切 换 的 功能 的 。 只 有 结合 本 节 将 要 介绍 的 ion-tabs 和 ion-tab 指令 ， 才 能 完整 
使 用 Ionic 的 选项 卡 功能 。 


8.2.1 选项 卡 栏 与 选项 卡 


1 . ion-tabs 指令 组 件 

生成 一 个 选项 卡 栏 ， 用 户 可 以 通过 点 击 其 中 的 选项 卡 〈 典 套 多 个 本 小 节 介绍 的 ion-tab 指 
令 组 件 生 成 ) 切换 一 组 视图 。 在 本 书 5.10 节 学 习 的 前 级 为 .tabs 开头 的 CSS 样式 类 可 以 作用 在 
ion-tabs 指令 组 件 上 。 选 项 卡 栏 出 现在 页 面 的 默认 位 置 ( 顶 部 或 底部 ) 依据 设备 的 默认 设置 而 
定 , 但 可 以 通过 在 组 件 上 附加 CSS 类 .tabs-top 和 .tabs-bottom 来 自 定义 。ion-tabs 组 件 接口 及 其 
说 明 如 表 8.6 所 示 。 











各 不 要 将 ion-tabs 置 入 一 个 ion-content 元 素 内 ， 它 会 造成 Ionic 的 CSS 错误 。 | 








表 8.6 ion-tabs 组 件 接口 及 其 说 明 





属性 /方法 /事件 说 明 
delegate-handle 可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicTabsDelegate 来 获取 本 组 件 对 象 的 句柄 名 称 





2 . ion-tab 指令 组 件 

定义 一 个 选项 卡 显示 内 容 ， 该 内 容 仅 存在 于 被 选中 的 给 定 选项 卡 中 。ion-tab 组 件 常 作为 
ion-tabs 组 件 的 直接 后 代 一 起 定义 出 属于 同一 个 选项 卡 栏 的 多 个 选项 卡 。 每 个 ion-tab 指令 组 件 
都 会 有 自己 的 浏览 历史 列表 , 可 以 通过 本 书 8.1.3 节 介 绍 的 $ionicHistory 来 访问 和 管理 。ion-tab 
组 件 接口 及 其 说 明 如 表 8.7 所 示 。 
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表 8.7 ion-tab 组 件 接口 及 其 说 明 


属性 /方法 /事件 说 明 

title 必须 ，string 类 型 ， 定 义 选项 卡 的 标题 

href 可 选 ，string 类 型 ， 用 户 触 碰 时 ， 该 选项 卡 将 会 跳 转 的 链接 

|icon | 可 选 ，string 类 型 选项 卡 的 图 标 

可 选 ，string 类 型 ， 被 选中 时 显示 的 图 标 

可 选 ，string 类 型 ， 未 被 选中 时 显示 的 图 标 

可 选 ， 返 回 数字 的 表达 式 类 型 ， 选 项 卡 上 的 徽章 

可 选 ，string 类 型 ， 选 项 卡 上 徽章 的 样式 ， 如 badge-assertive 

可 选 ， 事 件 表达 式 类 型 ， 选 项 卡 被 选中 时 触发 

可 选 ， 事 件 表达 式 类 型 ， 选 项 卡 取消 选中 时 触发 
可 选 ， 事 件 表 达 式 类 型 ， 如 果 设置 了 ng-click， 点 击 时 选项 卡 将 不 会 被 自动 选中 ， 
这 种 情况 下 可 以 通过 调用 $ionicTabsDelegate 的 select 方 法 来 定制 被 选中 的 选项 卡 

可 选 ，boolean 表 达 式 类 型 ， 是 否 隐藏 选项 卡 

可 选 ，boolean 表 达 式 类 型 ， 是 否 禁用 选项 卡 


【示例 8-3】Ionic 应 用 模板 tabs 的 代码 解析 
由 于 使 用 选项 卡 是 非常 流行 的 APP 导航 模式 之 一 ，Ionic 专门 定制 了 一 个 用 于 演示 说 明 选 
项 卡 导航 的 应 用 模板 , 可 以 通过 Ionic CLI 的 模板 选项 初始 化 创建 。 本 示例 将 在 这 个 Ionic 创建 
的 样 例 应 用 模板 基础 上 改造 和 说 明 选 项 卡 相关 组 件 的 使 用 要 点 。 
wwwyjsvappjs 的 相关 代码 片段 
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【代码 解析 】JavaScript 代码 里 为 每 个 选项 卡 都 创建 了 一 个 状态 。 第 一 个 名 为 tab 的 状态 
是 抽象 状态 ， 这 意味 着 下 面 所 有 类 似 tab.* 的 状态 都 是 它 的 子 状态 ， 它 们 被 激活 时 会 自动 载 入 
tab 状态 的 页 面 模 板 templates/tabs.html。 子 状态 都 定义 了 url 和 命名 视图 集 ， 这 样 在 因为 用 户 
点 击 该 链接 而 被 载 入 时 ， 命 名 视图 对 应 的 子 状态 页 面 模板 会 被 加 载 到 其 命名 对 应 的 同名 
<ion-nav-view> 视 图 容器 内 。 

wwwWjsvcontrollers.js 的 相关 代码 片段 
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【代码 解析 】JavaScript 代码 里 ChatDetailCtrl 控制 器 经 过 了 修改 , 加 入 了 双击 内 容 区 后 的 
事件 响应 , 分 别 通 过 $ionicTabsDelegate 和 $ionicNavBarDelegate 的 showBar 方法 来 隐藏 项 部 导 
航 栏 和 选项 卡 完成 了 全 屏 阅 读 模 式 的 切换 。 
www\index.html 的 相关 代码 片段 





【代码 解析 】 根 据 前 面 对 wwwAjsvapp.js 的 解说 ， 此 处 未 命名 的 <ion-nav-view> 里 将 会 载 入 
www\templates\tabs.html 页 面 模板 的 内 容 。 
www\templates\tabs.html 的 相关 代码 片段 





【代码 解析 】 代 码 通过 <ion-tabs> 和 <ion-tab> 的 组 合 建立 了 选项 卡 栏 的 三 个 选项 卡 。 
<ion-tabs> 上 的 多 个 CSS 样式 类 都 是 本 书 5.10 节 已 经 介绍 过 的 。 请 注意 在 每 个 <ion-tab> 里 嵌入 
了 命名 的 <ion-nav-view>， 它 们 将 分 别 戏 入 对 wwwWjsvapp.js 的 解说 里 提 及 的 子 状 态 页 面 模板 。 

wwwtemplates\tab-chats html 的 相关 代码 片段 
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【代码 解析 】 这 是 Chats 选项 卡 〈 即 tab.chats 状态 ) 的 页 面 模板 的 内 容 ， 界 面 显示 如 图 
8.6 所 示 。 请 注意 在 设置 跳 转 到 tab.chat-detail 状态 的 链接 时 需要 指定 在 前 面 加 上 #， 并 在 后 面 
加 入 chatid。 chat.id 这 个 参数 在 www\js\appjs 的 代码 里 的 tab.chat-detail 状态 的 url 属性 定义 
里 被 命名 为 chatId; 而 www\js\controllersjjs 的 控制 器 代码 里 可 以 通过 $stateParams.chatId 来 最 
终 获 取 到 这 个 参数 值 。 





图 8.6 Ionic 选项 卡 导航 的 应 用 模板 
www\templates\chat-detail.html 的 相关 代码 片段 
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{{chat.lastText}} 
</p> 
</ion-content> 
</ion-view> 


【代码 解析 】 这 是 tab.chat-detail 状态 的 页 面 模板 的 内 容 。 笔 者 进行 了 修改 ， 加 入 了 双击 
内 容 区 后 的 事件 处 理 函 数 调 用 ， 双 击 前 后 的 界面 显示 分 别 如 图 8.7 和 8.8 所 示 。 


Phone 4 v 

















《 chats Perry Governor 


下 


Y Look at my mukluks! 
A 


Look at my mukluks! 





图 8.7 点 击 链接 后 进入 tab.chat-detail 状态 ” 图 8.8 双击 内 容 区 后 进入 全 屏 显示 模式 





8.2.2 选项 卡 服务 


通过 使 用 $ionicTabsDelegate 服务 代理 , 可 以 在 脚本 中 控制 选项 卡 对 象 .本 书 8.2.1 节 的 【 示 
例 8-3】 中 有 S$ionicTabsDelegate 的 使 用 示例 。 

$ionicTabsDelegate 服务 代理 组 件 方法 集 解 释 如 下 : 

@ select(index): 选中 指定 的 选项 卡 ，index 参数 从 0 开始 ， 第 一 个 选项 卡 的 index 为 0， 
第 二 个 为 1， 依 次 类 推 。 

@ selectedIndex0: 返回 当前 选中 选项 卡 的 索引 号 。 如 果 当 前 没有 选中 的 选项 卡 ， 则 返 
回 -]。 

@ showBar(show): 设置 或 获取 选项 卡 栏 是 否 显示 。 可 选 的 boolean 类 型 的 show 参数 表 

@ S$getByHandle(handle): 返回 匹配 handle 字符 串 所 指定 的 选项 卡 栏 实例 。 
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在 本 章 的 开头 的 图 8.1 页 面 导航 切换 的 几 类 组 件 示 例 中 , 读者 可 以 发 现 侧 栏 菜单 有 效 地 补 
充 了 选项 卡 栏 宽度 空间 的 不 足 〈 普 通 的 手机 屏幕 上 基本 只 能 摆 得 下 5 个 选项 卡 ， 而 Ionic 1.X 
版 本 的 默认 选项 卡 栏 样式 并 不 支持 滑动 操作 ) ， 为 APP“ 偷 ”到 了 更 多 的 类 似 选项 卡 的 栏 位 。 
这 也 是 侧 栏 菜单 导航 方案 会 被 很 多 移动 设备 APP 应 用 的 原因 。 

侧 栏 菜单 ion-side-menus 是 一 个 最 多 包含 三 个 子 容 器 的 元 素 , 如 图 8.9 所 示 。 默 认 情 况 下 ， 
侧 栏 菜单 将 只 显示 内 容 区 域 容器 <ion-side-menu-content> 的 内 容 。 向 左 滑动 时 ， 将 显示 右边 菜 
单 栏 <ion-side-menu side="right" > 的 内 容 ， 向 右 滑动 时 ， 将 显示 左边 菜单 栏 <ion-side-menu 
side="left" > 的 内 容 。 





图 8.9 侧 栏 菜单 框架 构成 示意 图 


8.3.1 侧 栏 菜单 框架 
1 . ion-side-menus 组 件 


如 图 8.9 所 示 ，ion-side-menus 是 包含 〈 一 个 或 两 个 ) 侧面 菜单 栏 ion-side-menu 和 内 容 区 
域 容器 ion-side-menu-content 的 顶级 容器 元 素 。ion-side-menus 组 件 接口 及 其 说 明 如 表 8.8 所 示 。 





表 8.8 ion-side-menus 组 件 接口 及 其 说 明 


属性 /方法 /事件 
enable-menu-with-back-views | 可 选 ，boolean 类 型 ， 当 回 退 按钮 显示 时 是 否 可 以 使 用 侧 栏 菜单 的 选项 。 设 置 为 
false 时 ，menu-togsle 组 件 会 被 隐藏 ， 用 户 将 无 法 通过 手势 唤 出 侧 栏 菜单 。 只 有 








当 回 退 到 根 页 面 时 ( 回 退 按钮 不 再 显示 ) ，menu-toggle 组 件 会 重新 出 现 ， 侧 栏 
菜单 也 会 重新 生效 。 默 认 值 为 false 

delegate-handle 可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicSideMenuDelegate 来 获取 本 组 件 对 象 的 
句柄 名 称 
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2 . ion-side-menu-content 组 件 


如 图 8.9 所 示 ， 内 容 区 域 容器 ion-side-menu-content 用 于 显示 APP 的 主要 内 容 页， 与 
ion-side-menu 组 件 是 同 级 关系 。ion-side-menu-content 组 件 接口 及 其 说 明 如 表 8.9 所 示 。 


表 8.9 ion-side-menu-content 组 件 接口 及 其 说 明 


属性 /方法 /事件 说 明 

可 选 ，boolean 类 型 ， 内 容 区 域 是 否 可 被 拖 动 而 显示 侧 栏 菜单 。 默 认为 tme 

edge-drag-threshold 可 选 ， 可 能 的 值 为 number | tmue | false， 是 否 启 用 边 距 检测 。 如 果 设 置 为 一 个 正 数 ， 
那么 只 有 当 手 指 拖 动 的 位 置 发 生 在 距离 边界 小 于 这 个 数值 的 情况 下 ， 才 触发 侧 栏 
显示 。 当 设置 为 tue 时 ， 使 用 默认 的 25px 作 为 边 距 阔 值 。 如 果 设 置 为 false 或 0， 则 
意味 着 禁止 边 距 检测 ， 可 以 在 内 容 区 域 的 任何 地 方 拖 动 来 打开 侧 栏 


3 . ion-side-menu 组 件 


如 图 8.9 所 示 ， 侧 面 菜 单 栏 容器 用 于 包容 显示 侧 栏 菜单 ， 与 ion-side-menu-content 组 件 是 
同 级 关系 。ion-side-menu 组 件 接口 及 其 说 明 如 表 8.10 所 示 。 


表 8.10 ion-side-menu 组 件 接口 及 其 说 明 





属性 /方法 /事件 说 明 
| site | 可 选 ，sting 类 型 ， 设 置 侧 栏 菜单 当前 在 哪 一 边 。 可 选 的 值 有 : "eft 或 wight 
[width | 可 选 ，number 类 型 ， 用 于 设置 侧 栏 菜单 应 该 有 多 少 像素 的 宽度 。 默 认为 275 像 素 | 

【示例 8-4】Ionic 应 用 模板 sidemenu 的 代码 解析 

与 8.2 节 介绍 的 选项 卡 类 似 ，Ionic 也 专门 定制 了 一 个 用 于 演示 说 明 侧 栏 菜单 导航 的 应 用 
模板 , 可 以 通过 Ionic CLI 的 模板 选项 初始 化 创建 。 本 示例 将 在 这 个 Ionic 创建 的 样 例 应 用 模板 
基础 上 改造 和 说 明 侧 栏 菜单 相关 组 件 的 使 用 要 点 。 

www\js\appjjs 的 相关 代码 片段 
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【代码 解析 】 与 【示例 8-3 】 类 似 ，JavaScript 代码 里 为 每 个 菜单 栏 里 的 菜单 项 都 创建 了 一 
个 状态 。 第 一 个 名 为 app 的 状态 是 抽象 状态 ， 下 面 所 有 类 似 app.* 的 状态 都 是 它 的 子 状态 ， 它 
们 被 激活 时 会 自动 载 入 tab 状态 的 页 面 模 板 templates/menu.html。 子 状态 都 定义 了 url 和 命名 视 
图 集 , 这 样 在 因为 用 户 点 击 该 链接 而 被 载 入 时 , 命名 视图 对 应 的 子 状态 页 面 模板 会 被 加 载 到 其 
命名 对 应 的 同名 <ion-nav-view> 视 图 容器 内 。 这 里 与 【示例 8-3】 的 不 同 之 处 在 于 命名 视图 的 
名 称 都 是 menuContent。 这 是 因为 app 状态 的 页 面 模 板 templates/menu.html 里 ， 用 于 放置 子 状 
态 页 面 模板 的 命名 <ion-nav-view> 的 名 称 就 是 menuContent'。 随 着 状态 切换 ， 对 应 的 活动 子 状 
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态 的 页 面 模板 内 容 将 会 被 填充 到 这 个 命名 <ion-nav-view> 内 。 
www\index.html 的 相关 代码 片段 


【代码 解析 】 与 【示例 8-3】 不 同 ， 索 引 页 去 掉 了 显示 导航 栏 的 代码 〈 被 挪 至 app 状态 页 
面 模板 中 的 <ion-side-menu-content> 内 部 ), 只 有 用 于 载 入 app 状态 页 面 模板 的 <ion-nav-view>。 
www\temp006Cates\menu.html 的 相关 代码 片段 








【代码 解析 】 这 是 app 状态 的 页 面 模 板 , 显示 了 一 个 完整 的 侧 栏 菜单 框架 结构 所 需要 组 合 
的 三 个 元 素 ion-side-menus 、ion-side-menu-content 和 ion-side-menu 。 顶 级 容器 元 素 
ion-side-menus 的 enable-menu-with-back-views 属性 使 从 Playlists 页 面 进入 Playlist 页 面 后 导航 
栏 只 显示 回 退 按钮 ;而 菜单 栏 容器 ion-side-menu 被 设置 为 左 侧 菜单 栏 ， 设 置 的 属性 
expose-aside-when="(min-width:600px)" 使 设备 宽度 大 于 600 像素 时 (iPhone6 横 屏 时 ) 自动 显 
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示 菜 单 。 菜 单 栏 里 的 每 个 菜单 项 使 用 了 menu-close 指令 用 于 设置 点 


菜单 。 内 容 











生菜 单项 后 自动 隐藏 侧 栏 
区 域 容器 ion-side-menu-content 的 顶部 放置 了 顶部 导航 栏 ， 在 导航 栏 里 的 按钮 里 使 
用 了 menu-toggle 指令 用 于 控制 左边 的 侧 栏 菜单 的 显示 切换 。 


www'\templates\playlists.html 的 相关 代码 片段 























<ion-view view-title="Playlists"> 
<ion-content> 

// 显 示 列 表 中 每 个 项 目的 内 容 

<ion-list> 
<ion-item ng-repeat="playlist 

href="#/app/playlists/{{playlist.id}}"> 
{{playlist.title}} 

</ion-item> 


in playlists" 


</ion-list> 
</ion-content> 
</ion-view> 


【代码 解析 】 这 是 app.playlists 状态 的 页 面 模板 ， 在 不 同 的 设备 显示 模式 下 的 界面 效果 如 
图 8.10~ 图 8.12 所 示 , 其 中 的 参数 传递 与 【示例 8-3] 类 似 .模板 代码 中 出 现 的 ion-list 和 ion-item 
首 令 用 于 显示 列表 中 每 个 项 目的 内 容 ， 可 在 本 书 的 9.1.1 节 找到 相关 说 明 。 





playlists 左 例 菜单 栏 三 
Reggae gin Reggae 
hill Search Chil 
Dubstep rowse Dubstep 

Indie playlist ndie 

Rap Rap 


Cowbell 





图 8.10” 竖 屏 模式 下 侧 栏 菜单 隐藏 时 示意 图 ”图 8.11 竖 屏 模式 下 侧 栏 菜单 显示 时 示意 图 
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左 侧 菜 单 栏 playlists 
Login Reggae 
Search Chill 
Browse Dubstep 
playlists Indie 
Rap 


Cowbell 





图 8.12 横 屏 模式 下 侧 栏 菜单 直接 显示 示意 图 


8.3.2” 侧 栏 菜单 显示 设置 

1 . expose-aside-when 组 件 

侧 栏 菜单 是 否 自动 显示 的 条 件 表 达 式 。 默认 情况 下 , 侧 边 栏 是 隐藏 的 ,需要 用 户 向 左 或 向 
右 拖 动 内 容 区 域 ， 或 者 通过 一 个 切换 按钮 (menu-toggle 组 件 ) 来 打开 。 但 在 有 些 场 景 下 ( 比 
如 横 放 的 平板 ) ， 当 屏幕 宽度 足够 大 时 ， 自 动 地 显示 侧 边栏 内 容 会 更 合理 。 和 CSS 3 的 媒体 
查 询 @meida 类 似 ， expose-aside-when 需要 一 个 CSS 表达 式 ， 例 如 : 
expose-aside-when="(min-width:S00px)", 这 意味 着 当 屏 幕 宽度 大 于 500px 时 将 自动 显示 侧 栏 菜 
单 。 使 用 可 参考 本 节 【 示 例 8-4】。 














坊 CSS 表达 式 如 (min-width:500px) 两 边 的 小 括号 需要 输入 ， 否 则 该 指令 无 效 。 | 











2 . menu-toggle 组 件 


用 来 给 元 素 增加 切换 侧 栏 内 容 显 示 状 态 功能 的 属性 指令 。 可 选 值 为 left 或 right, 分 别 代表 
左边 或 者 右边 的 侧 栏 菜单 。 使 用 可 参考 本 节 【 示 例 8-4】。 


3 . menu-close 组 件 


用 来 给 元 素 增加 关闭 侧 栏 内 容 功 能 的 属性 指令 。 使 用 可 参考 本 节 【 示 例 8-4】。 


8.3.3 ” 侧 栏 菜单 服务 


通过 使 用 $ionicSideMenuDelegate 服务 代理 ， 可 以 在 脚本 中 控制 侧 栏 菜单 对 象 。 
S$ionicSideMenuDelegate 服务 代理 组 件 方法 集 及 其 说 明 如 表 8.11 所 示 : 
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表 8.11 $ionicSideMenuDelegate 服 务 代理 组 件 方法 集 及 其 说 明 
















toggleLeft([isOpen]) 是 否 打开 左 侧 栏 菜单 
toggleRight([isOpen]) 是 否 打 开 右 侧 栏 菜单 
getOpenRatio() 返回 当前 侧 栏 菜单 打开 的 宽度 占 其 总 宽度 比例 
isOpen0) | 返回 当前 是 否 有 侧 栏 菜单 被 打开 ， 无 论 是 左 侧 栏 菜单 ， 还 是 右 侧 栏 菜单 
isOpenLeft0 | 左 侧 栏 菜单 是 否 正 被 打开 
isOpenRight() 右 侧 栏 菜单 是 否 正 被 打开 
canDragContent([canDrag]) | 是 否 允 许 拖 电 内 容 区 域 以 打开 侧 栏 菜单 
edgeDragThreshold(value) | 设置 边 距 检测 阔 值 。 与 本 节 介 绍 的 ion-side-menu-content 组 件 的 同名 属性 功能 
一 致 
SgetByHandle(handle) 返回 匹配 handle 字 符 串 所 指定 的 侧 栏 菜单 实例 



































9 .人 导航 应 用 综合 实战 : 个 人 电子 简历 APP 框架 


有 了 第 7 章 布局 类 组 件 和 本 章 所 学 的 导航 类 组 件 的 知识 基础 后 ,就 已 经 具备 开发 一 个 常见 
APP 框架 的 能 力 了 。 本 节 将 演示 主要 使 用 本 章 内 容 所 覆盖 的 导航 类 组 件 开发 一 个 适 于 运行 在 
平板 〈 如 iPad) 或 大 屏 手机 〈 如 iPhone 6Plus) 的 个 人 电子 简历 APP 框架 。 在 找 工作 面试 时 ， 
就 可 以 不 用 带 上 纸 质 的 简历 , 而 使 用 移动 设备 将 个 人 所 有 资料 和 作品 展示 给 面试 官 。 该 个 人 电 
子 简历 APP 页 面 功能 集 的 导航 结构 如 图 8.13 所 示 。 

















个 人 信息 


个 人 信息 
物 动 
_ web 并 
交互 设计 
业务 领域 


( 入 万 A 一 -Etsg] 
[Casa 




















图 8.13 个 人 电子 简历 APP 框架 导航 结构 图 

该 APP 的 首 级 导航 使 用 侧 栏 菜单 实现 , 第 2 级 导航 使 用 选项 卡 栏 (如 果 有 多 个 页 面 存在 ) 
方式 或 直接 显示 最 终 页 面 方式 实现 。 导 航 的 实现 效果 示例 可 参见 图 8.14, 图 的 左 侧 部 分 为 首 级 
侧 栏 菜单 导航 ， 右 下 方 部 分 为 第 2 级 选项 卡 栏 导航 ， 第 3 级 则 是 最 终 需 要 泻 染 显 示 的 页 面 
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移动 开发 技能 


由 立 进行 第 三 方 SOK 的 入 开发 
固 他 信和 庆 仓 管理 机 制 











图 8.14 个 人 电子 简历 APP 框架 路 由 导航 分 级 








本 例 的 实现 程度 仅 达 到 将 APP 框架 建立 与 填充 一 个 如 图 8.14 所 示 的 样 例 页面 ， 其 余 的 页 
面 尚 需要 读者 根据 自己 的 简历 内 容 自 行 设计 与 填充 ,而 本 节 的 讲解 也 主要 是 讨论 该 个 人 电 
子 简 历 APP 框架 的 导航 结构 设计 与 实现 , 限于 篇 幅 不 一 一 分 析 所 有 结构 类 似 的 模板 页 面 。 


一 











【示例 8-5】 个 人 电子 简历 APP 框架 (以 下 简称 简历 框架 〉 的 导航 结构 的 代码 解析 
与 8.3.1 节 类 似 , 简历 框架 是 通过 Ionic CLI 的 侧 栏 菜 单 模板 选项 初始 化 创建 。 不同 之 处 在 


于 ， 应 用 的 导航 路 由 设置 代码 里 出 现 了 3 层 结构 。 
wwwAjsvappJjs 的 相关 代码 片段 
// 此 处 省 略 了 与 8.3.1 节 类 似 的 代码 片段 


.config (function ($stateProvider, $urlRouterProvider) { 


$stateProvider 

// 根 目录 ， 抽 象 状态 

.state('app', { 
el "app 
abstract: true, 
templateUrl: 'templates/menu.html', 
controller: 'AppCtrl' 

}) 

// 个 人 信息 
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【代码 解析 】 与 【示例 8-4】 类 似 ，JavaScript 代码 里 为 每 个 菜单 栏 里 的 菜单 项 都 创建 了 一 
个 状态 , 不 同 之 处 在 于 也 同时 为 选项 卡 栏 里 的 选项 卡 创建 了 一 个 状态 。 值 得 注意 的 是 , 除了 第 
一 个 名 为 app 的 状态 是 抽象 状态 以 外 ，app.skills 和 app.artifacts 也 同时 被 设置 为 了 抽象 状态 。 
抽象 状态 是 不 能 直接 泻 染 或 者 指定 跳 转 的 ， 因 此 这 3 个 抽象 状态 底下 都 会 有 子 状态 继承 自 它 
们 ， 如 app.profile、app.skills.mobile 和 app.artifacts.develop 等 。 
www\templates\imenu.html 的 相关 代码 片段 
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【代码 解析 】 代 码 只 抽取 显示 了 侧 栏 菜单 框架 结构 中 的 菜单 栏 元 素 ion-side-menu， 而 其 
余 元 素 基 本 是 不 会 变动 的 。 这 里 与 【示例 8-4】 的 不 同 点 是 菜单 栏 里 的 “工作 技能 ”和 “作品 
项 目 ” 菜 单项 均 指 向 了 其 下 的 第 3 级 页 面 的 路 由 地 址 ， 因 为 它们 对 应 的 抽象 状态 app.skills 和 
app.artifacts 是 不 能 直接 跳 转 的 。 
www\templates\tabs-skills.html 的 相关 代码 片段 
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【代码 解析 】 虽 然 app.skills 状态 是 抽象 状态 ， 但 是 它 的 子 状 态 在 演 染 页 面 时 也 会 以 其 模 
板 属性 作为 母 模板 给 泻 染 出 来 ， 因 此 这 里 的 代码 与 【示例 8-3】 的 代码 在 结构 上 是 类 似 的 。 
www\templates\skills-mobile.html 的 相关 代码 片段 





第 8 章 lonic 内 置 导航 类 组 件 








【代码 解析 】 这 是 第 3 层 状态 app.skills mobile 〈 工 作 技能 /移动 ) 的 模板 页 面 代 码 ， 它 与 
【示例 8-3】 的 模板 页 面 代码 在 结构 上 也 是 类 似 的 。 

其 余 的 页 面 代 码 与 菜单 导航 结构 都 与 已 经 介绍 讨论 过 的 知识 完全 一 致 ,这 里 就 不 再 一 一 重 
复 了 。 


8.5 小 结 


本 章 介绍 了 Ionic 框架 中 用 于 页 面 导航 切换 的 顶部 导航 栏 、 选 项 卡 、 侧 栏 菜单 的 使 用 与 示 
例 。 掌 握 了 这 些 组 件 的 用 法 之 后 ， 一 个 APP 应 用 的 多 个 单个 页 面 就 能 被 连接 起 来 ， 在 用 户 的 
操作 下 完成 应 用 的 不 同 页 面 切换 , 本 章 8.4 节 的 实战 案例 就 是 一 个 读者 可 借鉴 扩展 的 多 层 路 由 
导航 实现 演示 项 目 。 

下 一 章 将 介绍 Ionic 的 内 置 数据 展示 与 操作 组 件 的 基础 知识 与 应 用 示例 ， 这 些 组 件 用 于 单 
个 页 面 上 的 数据 显示 与 获得 用 户 的 操作 交互 ， 使 一 个 APP 应 用 的 功能 基本 完整 起 来 。 
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在 第 7 章 和 第 8 章 介绍 完 Ionic 提 供 的 布局 与 导航 这 些 定义 移动 APP 的 整体 框架 的 内 容 后 
本 章 将 介绍 构成 Ionic 开发 的 移动 APP 的 内 容 部 分 所 要 用 到 的 各 种 常见 界面 组 件 要 素 。 这 些 此 组 
件 都 是 市 面 上 流行 APP 经 常 采用 的 ,因此 Ionic 框架 做 了 深度 的 设计 封装 , 使 开发 者 通过 较 少 
的 代码 量 就 能 轻松 达到 专业 应 用 的 界面 与 功能 效果 。 

本 章 主要 涉及 的 知识 点 有 : 


@ ”数据 列表 (List) 显示 与 操作 相关 组 件 





@ 表单 (Form ) 子 元 素 组 件 | 
@ ”针对 不 同 场景 的 几 种 对 话 框 组 件 ett 
@ ”提示 性 组 件 eg es 
@ 手势 类 组 件 与 事件 
@ 点 击 或 键盘 输入 类 组 件 pmesec 
@ 第 8 章 介绍 的 导航 框架 中 几 种 组 件 的 综合 样 例 

复 习 呈 © Leo | Code4Startup 


Our Kickstarter reached S18784injust 2 


互动 出 版 网 
二 (我 看 电 商 ) 系 列 畅销 十 万 册 74 折 包 邮 


列表 相关 组 件 2 


下 。 道琼斯 海 外 投资 动态 信息 
在 本 书 5.4 列表 容器 一 节 ， 我 们 已 经 介绍 了 可 用 于 列 ee 
表 和 列表 项 的 Ionic 内 置 CSS 样式 类 。 本 节 将 学 习 如 何 动 。 | 5® wweweee teomscanon co 
态 配 置 列表 , 使 其 能 够 为 列表 项 滑动 显示 常见 的 删除 、 重 
Ee 图 9.1 列表 项 滑动 后 显示 的 操作 按钮 
排 和 自 定义 操作 按钮 ， 达 到 类 似 图 9.1 里 的 效果 。 | 









































9.1.1 列表 容器 与 列表 项 定制 
1 . ion-list 组 件 


声明 列表 容器 元 素 , 里面 将 包含 用 ion-item 指令 声明 的 列表 成 员 元 素 。ion-list 组 件 接口 及 
其 说 明 如 表 9.1 所 示 。 
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表 9.1 ion-list 组 件 接口 及 其 说 明 
属性 /方法 /事件 


可 选 ，string 类 型 ， 用 来 设置 列表 的 种 类 list-inset | card。 两 者 的 区 别 与 显示 可 参 
考 本 书 5.4.6 与 5.5.3 节 
show-delete 可 选 ，boolean 类 型 ， 是 否 显示 列表 成 员 内 的 删除 按钮 ion-delete-button 


2 . ion-item 组 件 


声明 列表 成 员 元 素 ， 一 般 作为 ion-list 组 件 的 子 元 素 出 现 。 里 面 除 了 可 以 包含 任意 HTML 
元 素 以 外 , 也 可 以 包含 本 小 节 介 绍 的 3 类 代表 在 列表 成 员 上 进行 操作 的 按钮 : ion-delete-button、 
ion-reorder-button 和 ion-option-button 。 


3 . ion-delete-button 组 件 


声明 删除 按钮 。 一 个 ion-item 内 最 多 有 一 个 删除 按钮 。 删 除 按钮 在 显示 时 总 是 位 于 成 员 的 
最 左 端 。 需 要 在 该 组 件 上 使 用 ng-click 指令 来 设置 点 击 事件 监听 函数 。 

4 .ion-reorder-button 组 件 

声明 重 排 按钮 。 一 个 ion-item 内 最 多 有 一 个 重 排序 按钮 。 重 排序 按钮 在 显示 时 总 是 位 于 成 
员 的 最 右 端 。 需 要 在 该 组 件 上 使 用 on-reorder 属性 来 设置 重 排序 事件 监听 函数 。 

5 . ion-option-button 组 件 

声明 选项 按钮 。 一 个 ion-item 内 可 以 包含 多 个 选项 按钮 。 选 项 按钮 是 隐藏 的 ， 需 要 用 户 向 
左 滑动 成 员 ， 以 显示 选项 按钮 。 需 要 在 该 组 件 上 使 用 ng-click 指令 来 设置 点 击 事件 监听 函数 。 


【示例 9-1】 演 示 了 列表 容器 与 列表 项 定制 组 件 ion-list、ion-item、ion-delete-button、 
ion-reorder-button、 ion-option-button 的 使 用 方法 。 
www\9.1.1.html 的 相关 代码 片段 
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【代码 解析 】 标 题 栏 的 两 个 按钮 按 下 后 分 别 会 让 列表 项 显示 删除 和 重 排序 按钮 ， 如 图 9.2 
所 示 。 此 外 内 容 区 域 的 on-hold 事 件 处 理 使 用 户 长 时 间 触 及 屏幕 表面 时 也 通过 $ionicListDelegate 
显示 重 排序 按钮 。 除了 Ionic 的 标准 删除 和 重 排 序 按钮 外 , 列表 项 也 加 入 了 “ 标 为 已 读 ” 和 “ 删 
除 ”两 个 选项 按钮 ， 在 用 户 向 左 滑动 时 出 现 ， 如 图 9.3 所 示 。 
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图 9.3 ”列表 初始 状态 与 列表 项 滑动 后 显示 的 操作 按钮 


9.1.2 ”列表 服务 


通过 使 用 $ ionicListDelegate 服务 代理 ， 可 以 在 脚本 中 控制 列表 对 象 。 
$ionicListDelegate 服务 代理 组 件 方法 集 : 


@@ ”showReorder([showReorder]): 设置 是 否 显示 该 列表 的 重 排序 按钮 。 

@ showDelete([showDelete]): 设置 是 否 显示 该 列表 的 删除 按钮 。 

@@ canSwipeItems([canSwipeItems]): 设置 是 否 允 许 通 过 在 列表 成 员 上 的 手势 向 左 滑动 来 
显示 成 员 选 项 按钮 。 

@ closeOptionButtons():; 关闭 所 有 选项 按钮 。 

@ S$getByHandle(handle): 返回 匹配 handle 字符 串 所 指定 的 列表 实例 。 
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$ionicListDelegate 的 使 用 可 参考 本 节 的 【示例 9-1】。 


9.1.3 ”列表 高 性 能 显示 优化 


collection-repeat 指令 和 ng-repeat 指令 类 似 ， 但 是 相对 于 ng-repeat， 它 更 适用 于 多 达 几 千 
项 的 大 数据 量 的 列表 数据 。 因 为 collection-repeat 只 将 处 于 可 视 区 域 的 数据 演 染 到 DOM 上 ， 
这 样 就 不 会 使 泻 染 的 任务 长 时 间 占 用 系统 CPU 资源 ， 从 而 导致 对 用 户 的 操作 失去 响应 。 
collection-repeat 组 件 接口 及 其 说 明 如 表 9.2 所 示 。 


a 册 。collectionrepeat 处 理 的 数据 必须 是 一 个 数组 。 
如 果 没 有 给 出 item-height 和 item-width 属性 ,指令 将 认为 所 有 的 列表 项 与 第 一 项 具有 同样 
的 宽度 和 高 度 。 
不 能 使 用 形式 为 〈::) 的 Angular 单 次 变量 绑 定 ， 和 否则 滚动 时 数据 浑 染 会 出 错 。 
iOS 设备 里 的 <img src> 元 素 浑 染 时 会 有 性 能 瓶颈 ， 推 荐 使 用 web worker 对 图 片 进行 缓存 。 
具体 做 法 参见 官方 说 明 : https://github.com/driftyco/ionic/issues/3194 





表 9.2 collection-repeat 组 件 接口 及 其 说 明 















属性 /方法 /事件 


collection-repeat 


item-render-buffer 


【示例 9-2】 演 示 了 collection-repeat 组 件 的 使 用 方法 ， 效 果 如 图 9.4 所 示 。 
www\9.1.3.html 的 相关 代码 片段 


说 明 


必须 ， 表 达 式 类 型 ， 格 式 与 Angular 的 ng-repeat 指令 类 似 : variable in expression， 
如 : album in artistalbums | orderBy:'name' 


可 选 ， 表 达 式 类 型 ， 列 表 元 素 的 宽度 。 可 以 是 一 个 数字 (以 像素 为 单位 ) 或 一 个 百 









可 选 ， 表 达 式 类 型 ， 列 表 元 素 的 高 度 。 可 以 是 一 个 数字 (以 像素 为 单位 ) 或 一 个 百 







可 选 ，number 类 型 ， 在 显示 的 列表 集 前 后 缓存 读 入 的 列表 项 数 ， 默 认 值 为 3。 如 果 
数据 项 里 有 较 多 的 图 片 ， 则 可 以 适当 将 该 数字 提高 ， 用 以 提前 载 入 图 片 


可 选 ，boolean 类 型 ， 设 置 当 列表 项 被 滚动 后 其 中 的 图 片 将 被 刷新 
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【代码 解析 】 在 内 容 区 域 使 用 collection-repeat 来 显示 图 片 列表 ， 通 过 对 宽度 和 高 度 的 设 
置 , 使 一 行 显示 两 个 图 片 , 图 片 高 度 固定 。 此 外 由 于 我 们 生成 的 是 来 源 于 外 部 网 站 提供 的 图 片 ， 
因此 微调 了 force-refresh-images 属性 使 缓存 图 片 项 数 增多 。 





垢 收养 小 盆 因 片 列表 





图 9.4 使 用 collection-repeat 来 优化 显示 图 片 列表 


207 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


日 .2 表单 输入 相关 组 件 


由 于 HTML 5 提供 的 表单 输入 类 控件 在 1OS 和 Android 设备 上 的 显示 都 已 趋 于 完善 , Ionic 
框架 并 没有 必要 花 很 大 代价 再 去 包装 定制 。 除了 在 本 书 5.7 节 已 经 了 解 的 toggle 组 件 ， 其 余 两 
个 表单 输入 组 件 ion-checkbox 和 ion-radio 的 使 用 接口 都 与 AngularJS 的 对 应 组 件 一 致 , 只 不 过 
外 形 上 有 所 区 别 ， 显 示 上 更 像 移动 原生 的 输入 控件 。 而 ion-toggle 的 使 用 接口 与 AngularJS 的 
checkbox 组 件 也 是 一 致 的 。 因 此 本 节 不 再 详 述 相关 接口 参数 ， 读 者 可 以 参考 : 

ion-checkbox 组 件 : http://docs.angularjs.org/api/ng/input/input[checkbox]。 

ion-toggle 组 件 : ”http://docs.angularjs.org/api/ng/input/input[checkbox]。 

ion-radio 组 件 : ”http://docs.angularjs.org/api/ng/input/input[radio]。 


【示例 9-3】 演 示 了 表单 输入 相关 组 件 的 使 用 方法 ， 效 果 如 图 9.5 所 示 。 
www\9.2.html 的 相关 代码 片段 





208 


第 9 章 lonic 内 置 数据 展示 与 操作 组 件 





【代码 解析 】 在 内 容 区 域 演示 了 本 节 介 绍 的 三 种 组 件 的 使 用 方法 。 参 数 设 置 与 AngularJS 
的 对 应 组 件 一 致 。 





9.5 ”使 用 表单 输入 相关 组 件 


日 . .对话 框 类 相关 组 件 


本 节 介 绍 的 基本 都 是 会 暂时 打 断 或 阻止 用 户 与 设备 屏幕 自由 的 交互 行为 , 而 需要 完成 指定 
的 输入 或 者 等 待 一 定时 间 后 才能 继续 的 组 件 . 这 些 组 件 都 是 通过 组 件 对 象 的 编程 接口 进行 控制 
的 ， 只 不 过 在 设备 界面 上 的 表现 形式 各 有 不 同 。 


9.3.1 模 态 框 
模 态 框 组 件 是 最 常见 的 对 话 框 组 件 , 当 它 被 调用 后 会 临时 占据 屏幕 的 全 部 空间 。 用 户 只 有 
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完成 指定 的 操作 或 执行 显 式 关闭 后 ,才能 返回 到 原来 的 界面 。 而 在 模 态 框 关闭 之 前 ， 其 他 的 用 
户 界面 交互 行为 将 无 法 继续 进行 ， 但 不 会 挂 起 JavaScript 代码 的 处 理 运行 。 例 如 强制 要 求 用 户 
输入 登录 的 验证 账户 信息 对 话 框 就 可 以 用 模 态 框 的 方式 来 完成 。 














| 定义 模 态 框 的 显示 部 分 时 ， 需 要 用 一 个 <ion-modal-view> 作 为 容器 元 素 包含 模 态 框 的 显示 
[ 内 容 。 一 般 使 用 内 联 模板 或 者 独立 模板 文件 的 方式 设置 模 态 框 的 显示 内 容 。 














在 JavaScript 代码 里 ， 可 以 先 通过 调用 $ionicModal 服务 对 象 的 创建 方法 初始 化 并 返回 类 
型 为 ionicModal 的 模 态 框 控制 器 对 象 〈 以 下 简称 ionicModal 控制 器 ) ， 随 后 通过 调用 这 个 
ionicModal 控制 器 的 若干 方法 完成 对 模 态 框 生命 周期 的 控制 。 

1 . $ionicModal 组 件 

用 于 载 入 模 态 框 模板 并 返回 ionicModal 控制 器 。 


@ fromTemplate (templateString, options) 


使 用 字符 串 模板 创建 模 态 框 。templateString 参数 是 模 态 框 模 板 的 字符 串 ，options 参数 是 
传递 给 调用 ionicModal 控制 器 initialize 方法 时 的 选项 对 象 。 返 回 值 是 一 个 ionicModal 控制 器 
实例 对 象 。 


@ fromTemplateUrl(templateUrl,options) 


使 用 内 联 模板 或 模板 文件 创建 模 态 框 。templateUrl 参数 是 模 态 框 模板 的 url，options 参数 
是 传递 给 调用 ionicModal 控制 器 initialize 方法 时 的 选项 对 象 。 返 回 值 是 一 个 最 终 可 被 解析 为 
ionicModal 控制 器 实例 对 象 的 promise 对 象 。 

2 .ionicModal 对 象 


由 $ionicModal 服务 组 件 初始 化 创建 用 来 控制 模 态 框 的 控制 器 对 象 。 


@ initialize (options) 
用 于 创建 一 个 新 的 模 态 框 控制 器 对 象 ， 其 options 参数 对 象 的 属性 及 说 明 如 表 9.3 所 示 。 
表 9.3 SionicModal.initialize 的 options 参数 对 象 可 选 属性 及 其 说 明 











scope object 类 型 ， 模 态 框 使 用 的 作用 域 (scope) 对 象 。 默认 将 创建 一 个 8rootScope 的 子 
作用 域 

animation 字符 串 类 型 ， 模 态 框 显示 与 隐藏 时 的 切换 动画 方式 ， 默 认为 slide-in-up 

focusFirstInput boolean 类 型 ， 模 态 框 显示 时 是 否 使 第 一 个 输入 组 件 获取 输入 焦点 。 默认 为 false 





backdropClickToClose boolean 类 型 ， 点 击 背景 幕布 时 是 否 关 闭 模 态 框 ， 默 认为 tue 


hardwareBackButtonClose | boolean 类 型 ， 用 户 在 Android 平台 下 点 击 系统 回 退 按钮 时 是 否 关 闭 模 态 框 ， 默 
认为 true 
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backdropClickToClose 属性 设置 后 实质 无 效 。 然 而 读者 可 以 通过 对 <ion-modal-view> 容 器 元 


蕊 默认 状态 下 模 态 框 的 容器 元 素 <ion-modal-view> 会 占据 设备 的 整个 屏幕 空间 ， 
[ 素 的 样式 进行 更 改 ， 使 模 态 框 不 再 占据 设备 的 整个 屏幕 空间 。 








® show0 

显示 模 态 框 。 返 回 值 是 动画 效果 完成 时 将 被 解析 完成 的 promise 对 象 。 
@ hide0) 

隐藏 模 态 框 。 返 回 值 是 动画 效果 完成 时 将 被 解析 完成 的 promise 对 象 。 
® remove() 


从 DOM 中 去 掉 并 清除 这 个 模 态 框 实例 。 








器 每 个 模 态 杠 结 来 使 用 后 ， 都 要 调用 它 的 emove0 方 法 进行 清除 ， 以 避免 内 存 汇 汤 。 | 








® isShown() 


返回 值 为 boolean 类 型 ， 指 示 模 态 框 是 否 正在 显 


a 《< ”ECO 中文 网 


示 。 
为 了 通过 界面 对 比 与 其 他 对 话 框 组 件 区 分 ， 模 态 
框 的 示例 可 参阅 本 章 9.3.6 对 话 框 类 组 件 综合 示例 。 





9.3.2 浮动 杠 


相对 于 9.3.1 介绍 的 模 态 框 组 件 而 言 , 浮动 框 提供 
了 一 种 非 侵 入 的 方式 来 显示 对 话 框 ,例如 图 9.6 所 示 的 
微 信 中 浮动 框 组 件 作为 下 拉 菜单 条 。 其 主要 用 于 以 下 
场景 ; 


@ “显示 当前 视图 的 更 多 信息 
@ “弹出 一 个 下 拉 菜 单条 由 用 户 选择 工具 或 者 配 
置 选项 
@ ”展示 当前 屏幕 中 某 个 子 视图 能 做 的 操作 列表 
除了 非 侵 入 和 不 默认 占据 设备 整个 屏幕 的 特性 区 别 以 外 , 浮动 框 的 创建 、 使 用 和 编程 接口 
与 模 态 框 非常 相近 。 





图 9.6 微 信 中 浮动 框 组 件 作为 下 拉 菜 单条 








[ 浮动 框 的 显示 内 容 。 一 般 使 用 内 联 模板 或 者 独立 模板 文件 的 方式 设置 浮动 框 的 显示 内 容 。 





性 元 定义 浮动 框 的 显示 部 分 时 , 与 模 态 框 类 似 ， | 
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在 JavaScript 代码 里 , 可 以 先 通过 调用 $ionicPopover 服务 对 象 的 创建 方法 初始 化 并 返回 类 
型 为 ionicPopover 的 浮动 框 控制 器 对 象 〈 以 下 简称 ionicPopover 控制 器 ) ， 随 后 通过 调用 这 个 
ionicPopover 控制 器 的 若干 方法 完成 对 浮动 框 生命 周期 的 控制 。 

1 . $ionicPopover 组 件 

用 于 载 入 浮动 框 模 板 并 返回 ionicPopover 控制 器 。 

@ fromTemplate (templateString, options) 

使 用 字符 串 模 板 创 建 浮动 框 。templateString 参数 是 浮动 框 模板 的 字符 串 ，options 参数 是 
传递 给 调用 ionicModal 控制 器 initialize 方法 时 的 选项 对 象 .返回 值 是 一 个 ionicPopover 控制 器 
实例 对 象 。 


@ fromTemplateUrl(templateUrl,options) 


使 用 内 联 模 板 或 模板 文件 创建 浮动 框 。templateUrl 参数 是 浮动 框 模板 的 url，options 参数 
是 传递 给 调用 ionicPopover 控制 器 initialize 方法 时 的 选项 对 象 ,返回 值 是 一 个 最 终 可 被 解析 为 
ionicPopover 控制 器 实例 对 象 的 promise 对 象 。 

2 . ionicPopover 对 象 


由 $ionicPopover 服务 组 件 初始 化 创建 用 来 控制 浮动 框 的 控制 器 对 象 。 


@ initialize (options) 
用 于 创建 一 个 新 的 浮动 框 控制 器 对 象 ， 其 options 参数 对 象 的 属性 及 说 明 见 表 9.4。 
表 9.4 ”SionicPopover.initialize 的 options 参数 对 象 可 选 属性 及 其 说 明 






属性 
object 类 型 ， 浮 动 框 使 用 的 作用 域 (scope) 对 象 。 默 认 将 创建 一 个 SrootScope 
的 子 作 用 域 
boolean 类 型 ， 浮 动 框 显示 时 是 否 使 第 一 个 输入 组 件 获 取 输 入 焦点 。 默 认为 
false 

boolean 类 型 ， 点 击 背 景 幕布 时 是 否 关闭 浮动 框 ， 默 认为 tue 


boolean 类 型 ， 用 户 在 Android 平台 下 点 击 系统 回 退 按钮 时 是 否 关闭 浮动 框 ， 
默认 为 tmue 







scope 


focusFirstInput 


backdropClickToClose 


hardwareBackButtonClose 











® show(Sevent) 


显示 浮动 框 。 参 数 gevent 可 以 是 触发 浮动 框 显示 的 事件 对 象 或 是 浮动 框 需要 对 齐 显示 的 视 
图 元 素 。 返 回 值 是 动画 效果 完成 时 将 被 解析 完成 的 promise 对 象 。 


® hide0 
隐藏 浮动 框 。 返 回 值 是 动画 效果 完成 时 将 被 解析 完成 的 promise 对 象 。 


过 亿 
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® remove() 


从 DOM 中 去 掉 并 清除 这 个 浮动 框 实例 。 








阳 寺 | 每 个 浮动 框 结束 使 用 后 ， 都 需要 调用 它 的 remove( 方 法 进行 清除 ， 以 避免 内 存 泄漏。 | 











® isShown() 

返回 值 为 boolean 类 型 ， 指 示 浮动 框 是 否 正在 显示 。 

为 了 通过 界面 对 比 与 其 他 对 话 框 组 件 区 分 ， 浮 动 框 的 示例 可 参阅 本 章 9.3.6 对 话 框 类 组 件 
综合 示例 。 





9.3.3 ”弹出 框 


弹出 框 服务 组 件 SionicPopup 可 以 看 做 是 缩小 的 模 态 框 ， 通 常用 于 提醒 、 警 告 等 。 在 用 户 
响应 弹出 框 之 前 ， 其 他 的 交互 行为 不 能 继续 或 无 效 。 与 模 态 框 覆 盖 设 备 整个 屏幕 空间 不 同 ， 弹 
出 框 通常 仅 占 据 一 部 分 屏幕 空间 。 此 外 该 组 件 提供 了 浏览 器 的 Window 对 象 支持 的 3 个 弹出 框 
方法 ， 也 是 作为 对 比较 丑陋 且 无 法 定制 外 观 的 浏览 器 标准 弹出 框 的 补充 。 

支持 的 方法 有 : 


1 . show(options) 


可 以 用 于 显示 一 个 完整 而 复杂 的 对 话 框 ,这 是 随后 所 述 其 他 3 个 弹出 框 方法 的 基础 功能 方 
法 ， 其 options 参数 对 象 的 可 选 属性 及 其 说 明 如 表 9.5 所 示 。 


表 9.5 SionicPopup.show 的 options 参数 对 象 可 选 属性 及 其 说 明 











属性 说 明 


字符 叫 类 型 ， 弹 出 框 的 标题 


字符 串 类 型 ， 自 定义 的 CSS 样式 类 ， 这 个 样式 类 将 会 被 作用 在 弹出 框 的 最 外 层 容器 


上 (一 个 具有 CSS 样式 类 .popup-container 的 <div> 容 器 元 素 ) 


字符 串 类 型 ， 可 选 ， 弹 出 框 的 子 标题 


字符 串 类 型 ， 可 选 ， 放 在 弹出 框 内 容 区 内 的 HTML 字符 串 模板 


















字符 串 类 型 ， 可 选 ， 在 弹出 框 内 容 区 内 的 HIML 模板 的 URL 


作用 域 对 象 ， 可 选 ， 一 个 链接 到 弹出 框 内 容 区 (一 个 具有 CSS 样式 类 .popup-body 的 
<div> 容 器 元 素 ) 的 scope〔 作 用 域 ) 


按钮 对 象 数组 ， 可 选 。 每 个 按钮 带 有 一 个 text (按钮 文本 ) 和 type (按钮 类 型 的 CSS 
样式 类 ) 字段 ， 此 外 还 有 一 个 onTap 事件 函数 。 当 点 击 弹出 框 上 的 相关 按钮 ， 会 触 
发 调用 对 应 按钮 定义 的 onTap 事件 函数 。 函 数 调用 完毕 默认 会 关闭 弹出 框 ， 返 回 弹出 
框 关闭 时 的 返回 值 。 如 果 想 阻止 默认 的 关闭 弹出 框 动作 ， 则 需要 在 触发 onTap 事件 函 
数 里 调用 eventpreventDefault0 
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show(options) 方 法 将 返回 一 个 promise 对 象 ， 当 弹出 框 关闭 时 ， 这 个 对 象 将 会 被 完成 解析 


(resolved) 。 


【示例 9-4】 构 造 弹出 框 组 件 $ionicPopup.show 的 options 参数 





【代码 解析 】 根 据 表 9.5 可 以 获得 其 中 所 有 参数 的 说 明 。 
2 . alert(options) 


可 以 用 于 显示 一 个 带 有 一 段 信 息 和 一 个 关闭 按钮 的 简单 提示 弹出 框 , 与 浏览 器 的 Window 
对 象 的 同名 方法 功能 类 似 ， 其 options 参数 对 象 的 可 选 属性 及 其 说 明 如 表 9.6 所 示 。 
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表 9.6 $ionicPopup.alert 的 options 参数 对 象 的 可 选 属性 及 其 说 明 






title 字符 串 类 型 ， 弹 出 框 的 标题 
cssClass 字符 串 类 型 ， 自 定义 的 CSS 样式 类 ， 这 个 样式 类 将 会 被 作用 在 弹出 框 的 最 外 层 容器 






























上 (一 个 具有 CSS 样式 类 .popup-container 的 <div> 容 器 元 素 ) 
subTitle 字符 串 类 型 ， 可 选 ， 弹 出 框 的 子 标题 
template 字符 串 类 型 ， 可 选 ， 放 在 弹出 框 内 容 区 内 的 HTML 字符 串 模板 
templateUrl 字符 串 类 型 ， 可 选 ， 在 弹出 框 内 容 区 内 的 HIML 模板 的 URL 
okText 字符 串 类 型 ， 可 选 ， 关 闭 按钮 显示 的 文字 ， 默 认为 OK 














可 选 ， 





字符 串 类 型 ， 





按钮 类 型 的 CSS 样式 类 。 默 认为 button-positive 





alert(options) 方 法 将 返回 一 个 promise 对 象 ， 当 弹出 框 关 闭 时 ， 这 个 对 象 将 会 被 完成 解析 
(resolved) 。 
3 . confirm(options) 
可 以 用 于 显示 一 个 简单 的 带 有 确定 取消 按钮 的 弹出 框 , 与 浏览 器 的 Window 对 象 的 同名 方 
法 功能 类 似 ， 其 options 参数 对 象 可 选 属性 及 其 说 明 如 表 9.7 所 示 。 
表 9.7 $ionicPopup.confirm 的 options 参数 对 象 可 选 属 性 及 其 说 明 








属性 说 明 


字符 吊 类 型 ， 弹 出 杠 的 标题 


字符 串 类 型 ， 自 定义 的 CSS 样式 类 ， 这 个 样式 类 将 会 被 作用 在 弹出 框 的 最 外 层 容器 


上 (一 个 具有 CSS 样式 类 .popup-container 的 <div> 容 器 元 素 ) 
字符 串 类 型 ， 可 选 ， 弹 出 框 的 子 标题 
选 ， 放 在 弹出 框 内 容 区 内 的 HTML 字符 趾 模板 
在 弹出 框 内 容 区 内 的 HTML 模板 的 URL 
关闭 按 钥 显 示 的 文字 ， 默 认为 OK 


按钮 类 型 的 CSS 样式 类 。 默 认为 button-positive 
cancelText 字符 串 类 型 ， 可 选 ， 取 消 按钮 显示 的 文字 ， 默 认为 Cancel 
字符 串 类 型 ， 可 选 ， 取 消 类 型 的 CSS 样式 类 。 默 认为 button-default 













































cancelType 








confirm(options) 方 法 将 返回 一 个 promise 对 象 ， 当 弹出 框 关闭 时 ， 这 个 对 象 将 会 被 完成 解 
析 (resolved) ， 用 户 点 击 的 是 确定 按钮 则 解析 值 为 tue， 和 否则 为 false。 

4 . prompt(options) 

可 以 用 于 显示 一 个 带 有 一 个 input 输入 控件 、 一 段 提 示 信 息 和 确定 取消 按钮 的 简单 提示 弹 
出 框 ， 与 浏览 器 的 Window 对 象 的 同名 方法 功能 类 似 ， 其 options 参数 对 象 的 可 选 属性 及 其 说 
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明 如 表 9.8 所 示 


表 9.8 $ionicPopup.prompt 的 options 参数 对 象 可 选 属性 及 其 说 明 
属性 说 明 


字符 串 类 型 ， 弹 出 杠 的 标 是 

字符 串 类 型 ， 自 定义 的 CSS 样式 类 ， 这 个 样式 类 将 会 被 作用 在 弹出 框 的 最 外 层 容器 
上 (一 个 具有 CSS 样式 类 .popup-container 的 <div> 容 器 元 素 ) 

字符 串 类 型 ， 可 选 ， 弹 出 框 的 子 标题 

字符 串 类 型 ， 可 选 ， 放 在 弹出 杠 内 容 区 内 的 HTML 字符 串 模板 

字符 叫 类型， 可 选 ， 在 弹出 杠 内 容 区 内 的 HTML 模板 的 URL 


















| 先 
字符 串 类 型 ， 可 选 ， 关 闭 按钮 显示 的 文字 ， 默 认为 OK 


选 ， 按 钮 类 型 的 CSS 样式 类 。 默 认为 button-positive 
， 可 选 ， 取 消 按钮 显示 的 文字 ， 默 认为 Cancel 
字符 品类 型， 可 选 ， 取 消 灶 型 的 CSS 样式 类 。 默 认为 button-default 
字符 串 类 型 ， 可 选 ，input 输入 控件 的 类 型 。 默 认为 text 
字符 串 类 型 ， 可 选 ，input 输入 控件 里 的 初始 值 。 默 认为 空 
number 类 型 ， 可 选 ， 设 置 input 输入 控件 里 可 输入 文本 的 最 大 长 度 。 默 认为 空 
字符 吊 类 型 ， 可 选 ， 设 置 input 输入 控件 placeHolder 属性 值 。 黑 认为 空 
prompt(options) 方 法 将 返回 一 个 promise 对 象 ， 当 弹出 框 关 闭 时 ， 这 个 对 象 将 会 被 完成 解 
析 (resolved)。 用 户 点 击 的 是 确定 按钮 则 解析 值 为 input 输 入 控件 的 输入 内 容 , 否则 为 undefined。 
为 了 通过 界面 对 比 与 其 他 对 话 框 组 件 区 分 ， 弹 出 框 的 示例 可 参阅 本 章 9.3.6 对 话 框 类 组 件 


综合 示例 。 
































9.3.4 上 拉 菜 单 


上 拉 菜 单 组 件 来 自 于 模拟 移动 设备 专 有 样式 的 界面 控件 ， 
如 图 9.7 所 示 的 移动 QQ 中 上 拉 菜 单 。 该 组 件 的 显示 是 一 个 从 
设备 屏幕 底部 向 上 滑动 出 现 的 菜单 项 面板 , 用 户 可 以 从 菜单 项 
列表 中 点 击 选择 。 危 险 的 操作 以 红色 突出 文本 显示 。 用 户 点 击 
背景 幕布 可 以 直接 关闭 该 组 件 。 

$ionicActionSheet 可 以 创建 的 上 拉 菜 单 由 3 种 按钮 组 成 ， 
用 户 点 击 任何 按钮 后 都 自动 关闭 : 

@@ ”取消 (cancel ) 按钮 : 总 是 位 于 上 拉 菜 单 的 底部 。 一 

个 上 拉 菜 单 最 多 有 一 个 取消 按钮 。 
@ 危险 (destructive ) 选项 按钮 : 危险 选项 的 按钮 文字 
将 被 标 红 以 明显 提示 用 户 。 一 个 上 拉 菜 单 最 多 能 包含 因 97 移动 QQ 中 上 拉 羔 出 组 伯 











Dh 
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一 个 危险 选项 按钮 。 
@ 自 定 义 按钮 用 户 可 定义 任意 数量 的 按钮 。 
使 用 $ionicActionSheet 触发 显示 上 拉 菜 单 很 简单 ， 在 Angular 的 控制 器 代码 里 调用 
$ionicActionSheet 的 show 方法 传 入 参数 对 象 options 即 可 (show(options)) 。 
show(options) 加 载 并 显示 一 个 新 的 上 拉 菜 单元 素 , 这 个 上 拉 菜 单 将 拥有 一 个 隔离 的 作用 域 
对 象 (isolated scope) ， 随 后 该 元 素 将 被 插入 到 页 面 视图 的 内 容 区 域 ， 其 options 参数 对 象 的 
可 选 属 性 及 其 说 明 如 表 9.9 所 示 。 


表 9.9 $ionicActionSheet.show 的 options 参数 对 象 可 选 属 性 及 其 说 明 





属性 说 明 

object 类 型 的 数组 ,数组 中 的 每 个 object 的 text 属性 代表 了 一 个 按钮 的 显示 文本 

titleText 字符 申 类 型 ， 上 拉 菜 单 的 标题 

cancelText 字符 串 类 型 ， 取 消 按钮 的 文字 

destructiveText 字符 串 类 型 ， 和 危险 选项 按钮 的 文字 

事件 函数 类 型 ， 当 点 击 取消 按钮 或 点 击 青 景 时 触发 

事件 函数 类 型 ， 当 自 定义 按钮 之 一 被 点 击 时 和 触发。 按钮 的 索引 将 作为 函数 参数 
传 入 。 函 数 返回 true 则 将 关闭 上 拉 菜单 ， 或 为 se 则 保持 打开 


destructiveButtonClicked | 事件 函数 类 型 ， 当 危险 选项 按钮 被 点 击 时 人 触发。 返回 tmue 则 关闭 操作 表 ， 或 为 
false 则 保持 打开 


boolean 类 型 ， 当 切换 到 新 的 视图 时 是 否 关闭 此 上 拉 菜 单 。 默 认为 tme 


cssClass 字符 串 类 型 ， 自 定义 的 CSS 样式 类 ， 这 个 样式 类 将 会 被 作用 在 上 拉 菜 单 组 件 的 
最 外 层 容器 上 





show(options) 方 法 将 返回 一 个 函数 对 象 ， 调 用 该 函数 对 象 将 关闭 对 应 的 上 拉 菜 单 。 
【示例 9-5】 调 用 $ionicActionSheet 显示 类 似 图 9.7 的 上 拉 菜 单 样 例 
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【代码 解析 】 这 是 常见 的 用 法 , 在 Angular 的 控制 器 代码 里 调用 $ionicActionSheet 的 show 
方法 传 入 参数 对 象 options 创建 上 拉 菜 单 。 通 过 调用 返回 的 函数 对 象 关 闭 清理 创建 的 上 拉 菜 单 。 
为 了 通过 界面 对 比 与 其 他 对 话 框 组 件 区 分 ， 上 拉 菜 单 的 示例 可 参阅 本 章 9.3.6 对 话 框 类 组 

件 综合 示例 。 


9.3.5 背景 幕布 


在 对 话 框 的 其 他 组 件 如 模 态 框 、 浮 动 框 、 上 拉 菜 单 中 ， 背 景 幕布 (backdrop) 都 扮演 了 帮 
助 其 他 组 件 创 建 一 个 覆盖 设备 屏幕 的 半 透 明 灰 色 图 层 ， 提 示 用 户 聚 焦 于 指定 的 交互 区 域 的 角 
色 。 在 Ionic 里 也 可 以 通过 背景 幕布 服务 组 件 $ionicBackdrop 单独 地 使 用 和 控制 背景 幕布 的 保 
持 (retain) 和 释放 release) 操作 。 读 者 可 以 认为 这 两 个 操作 类 似 于 加 锁 与 解锁 操作 ， 只 有 
当 解 锁 数 >= 加 锁 数 时 ， 屏 幕 才 会 隐藏 背景 幕布 。 


目前 背景 幕布 在 DOM 里 的 元 来 的 z-index 默认 值 为 11， 如 果 读 者 自行 定制 了 其 他 组 件 的 


样式 使 z-index 值 >-11， 则 将 会 无 法 被 背景 幕布 组 件 盖 住 。 这 也 是 利用 背景 幕布 创建 自 定 
义 提示 效果 的 一 个 可 行 做 法 。 





@ retain 0: 加 持 背 景 幕布 。 
@ release (): 释放 背景 幕布 。 


9.3.6 ”对 话 框 类 组 件 综合 示例 
从 本 书 的 开头 到 目前 为 止 ， 开 发 一 个 移动 APP 的 前 端 代码 的 大 部 分 组 件 读者 已 经 接触 过 
了 。 本 小 节 用 一 个 同时 包含 第 8 章 所 介绍 的 导航 框架 的 几 种 组 件 的 综合 性 样 例 , 来 演示 一 下 本 
节 对 话 框 类 相关 组 件 的 使 用 和 界面 效果 。 
【示例 9-6】 对 话 框 类 组 件 综合 示例 
www\9.3.6.html 的 侧 栏 菜单 相关 代码 片段 
<I-- 例 栏 菜单 整体 结构 -> 
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妾 量 IONIC 站 
<script id="menu.html" type="text/ng-template"> 
<ion-side-menus> 
<ion-side-menu side="left" width="130"> 
<ion-header-bar class="bar-stable"> 
<hl class="title"> 对 话 框 </h1> 
</ion-header-bar> 
<ion-content> 
<ion-1ist> 
<ion-item menu-close href="#/dialog/modal"> 模 态 框 </ion-item> 
<ion-item menu-close /dialog/popover"> 浮 动 框 </ion-item> 
<ion-item menu-close /dialog/popup/alert"> 弹 出 框 </ion-item> 
<ion-item menu-close "#/dialog/actionsheet"> 上 拉 菜 单 </ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 
<ion-side-menu-content> 
<ion-nav-bar class="bar-stable"> 
<ion-nav-buttons side="left"> 
<button class="button button-icon button-clear ion-navicon" 
menu-toggle="left"></button> 
</ion-nav-buttons> 
</ion-nav-bar> 
<ion-nav-view name="menuContent"></ion-nav-view> 
</ion-side-menu-content> 
</ion-side-menus> 
</script> 
<! 一 -此 处 省 略 在 第 8 章 已 经 学 习 掌握 的 页 面 路 由 导航 代码 片段 --> 
<body ng-controller="DefaultController" > 
<ion-nav-view></ion-nav-view> 
</body> 


【代码 解析 】 以 上 代码 所 构造 的 侧 术 
路 由 导航 框架 ， 因 为 相关 的 内 容 已 经 








失 单 如 图 9.8 左 侧 所 示 ， 使 用 的 是 标准 的 Ionic 侧 栏 
本 书 的 8.3 节 详 细 解 析 过 ， 这 里 就 不 再 重复 了 。 









图 9.8” 侧 栏 菜 单 + 选项 卡 





铅 造 的 二 级 功能 导航 布局 
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www\9.3.6.html 的 模 态 框 相关 代码 片段 








$scope.modal .remove (); 
有 
Ds 
</script> 


【代码 解析 】 以 上 代码 所 构造 的 模 态 框 如 图 9.9 所 示 。 模 态 框 控制 器 ModalController 将 加 





载 ID 为 modal-show.html 的 模板 页 HTML 构造 模 态 框 对 象 $gscope.modal。 后 续 调 











该 对 象 的 








show 和 hide 方法 来 显示 与 隐藏 模 态 框 。 最 后 在 作用 域 的 $destroy 事件 处 理 中 ， 需 要 调 
象 的 remove 方法 清理 资源 。 








图 9.9 模 态 杠 


www\9.3.6.html 的 浮动 框 相关 代码 片段 
<!-- 浮动 框 页 面 --> 
<script id="popover.html" type="text/ng-template"> 
<ion-view view-title=" 浮 动 框 Popover"> 
<ion-content> 
<h3 class="popover-align"> 浮 动 框 Popover</h3> 


<a class="button" ng-click="openPopover ($event);"> 浮 动 框 是 什么 ? </a> 
</ion-content> 


</ion-view> 
</script> 
<!-- 浮动 框 模板 --> 
<script id="popover-show.html" type="text/ng-template"> 
<ion-popover-view class="dark-bg positive padding dark-arrow"> 
<p> 浮 动 框 提供 了 一 种 非 侵 入 的 方式 来 显示 对 话 框 ， 主 要 用 于 以 下 场景 : </p> 
<ul> 
<1i> 显 示 当 前 视图 的 更 多 信息 </1i> 
<1i> 弹 出 一 个 下 拉 菜 单条 由 用 户 选择 工具 或 者 配置 选项 </1i> 
<1i> 展 示 当 前 屏幕 中 某 个 子 视图 能 做 的 操作 列表 </1i> 
</ul> 
</ion-popover-view> 
</seript> 
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【代码 解析 】 以 上 代码 所 构造 的 浮动 框 如 图 9.10 所 示 。 浮 动 框 控制 器 PopoverController 
将 加 载 ID 为 popover-show.html 的 模板 页 HTML 构造 浮动 框 对 象 Sscope.popover。 后 续 调用 该 
对 象 的 show 和 hide 方法 来 显示 与 隐藏 浮动 框 。 最 后 在 作用 域 的 $destroy 事件 处 理 中 ， 需 要 调 
用 该 对 象 的 remove 方法 清理 资源 。 





浮动 框 Popover 


主动 框 是 什么 了 





9.10 浮动 框 
www\9.3.6.html 的 弹出 框 相关 代码 片段 
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【代码 解析 】 以 上 代码 所 构造 的 弹出 框 如 图 9.11 所 示 。 弹 出 框 控制 器 PopupShowController 
将 直接 根据 show 方法 传 入 的 属性 对 象 显示 弹出 框 。 在 传 入 的 模板 参数 template 字符 串 里 ， 是 
通过 ng-model 属性 来 绑 定 作用 域 对 象 的 属性 的 。 


请 输入 您 的 联系 信息 
姓名 与 电话 号 码 





图 9.11 弹出 框 
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www\9.3.6.html 的 上 拉 菜 单 相关 代码 片段 


【代码 解析 】 以 上 代码 所 构造 的 上 拉 菜 单 如 图 9.12 底部 所 示 。 上 拉 菜 单 控制 器 
ActionSheetController 将 直接 根据 show 方法 传 入 的 属性 对 象 显示 菜单 项 ,触发 显示 上 拉 菜 单 是 
使 用 用 户 在 标题 上 长 按时 触发 的 on-hold 事件 。 
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图 9.12 上 拉 菜 单 


昌 .A 加载 中 提示 相关 组 件 


加 载 中 适用 于 向 用 户 提示 APP 应 用 当前 需要 通过 网 络 服务 从 后 台数 据 库存 取 数 据 或 进行 
耗 时 较 多 的 计算 与 初始 化 工作 ， 这 属于 移动 应 用 通用 的 交互 模式 。 本 节 将 介绍 Ionic 的 动画 图 
标 型 加 载 中 提示 与 操控 提示 的 服务 组 件 。 





9.4.1 ”加 载 中 指示 器 


Ionic 预 置 了 多 种 用 于 旋转 加 载 的 SVG 动画 图 标 。 当 APP 进行 耗 时 操作 需要 用 户 等 待 时 ， 
可 以 显示 加 载 中 指示 器 组 件 ion-spinner 给 用 户 一 个 明显 的 等 待 提示 。 目 前 可 用 的 动画 名 称 与 
样式 参见 图 9.13。 


i0s-small 
bubbles 


circles 


crescent 








图 9.13 Ionic 预 置 加 载 中 指示 名 称 与 显示 


226 


第 9 章 lonic 内 置 数据 展示 与 操作 组 件 


加 载 中 指示 器 组 件 ion-spinner 的 使 用 很 简单 ， 直 接 在 要 显示 组 件 的 位 置 插入 ion-spinner 
指令 声明 并 指定 动画 图 标 名 称 和 以 spinner- 为 前 级 的 CSS 颜色 样式 类 即 可 ， 如 : 


<ion-spinner icon=’bubbles’ class="spinner-energized" ></ion-spinner> 


9.4.2 ”加 载 中 指示 服务 
当 系 统 需 要 完成 某 些 耗 时 的 操作 (如 从 外 部 调用 API 或 初始 化 移动 设备 的 某 些 硬件 功能 
才能 继续 响应 用 户 的 操作 交互 时 ， 可 以 使 用 加 载 中 指示 器 提示 用 户 系统 的 后 台 操 作 正在 进行 ， 
暂时 无 法 交互 。 加 载 中 指示 器 通常 会 三 加 一 个 半 透 明 的 背景 幕布 层 〈 与 背景 幕布 组 件 类 似 ) 
以 阻止 用 户 的 交互 ， 但 不 影响 系统 的 后 台 运算 进行 。 

1 . $ionicLoading 服务 组 件 

用 于 显示 和 隐藏 加 载 中 的 指示 器 。 

S$ionicLoading 服务 代理 组 件 方法 集 : 





® show (options) 


显示 一 个 加 载 中 的 指示 器 。 如 果 该 指示 器 已 在 显示 状态 ， 它 使 用 options 参数 修改 该 指示 
器 ， 并 保持 指示 器 的 显示 状态 ，options 参数 对 象 的 可 选 属性 及 其 说 明 如 表 9.10 所 示 。 


表 9.10 SionicLoading.show 的 options 参数 对 象 可 选 属性 及 其 说 明 
















属性 
子 作用 域 ， 默 认 将 创建 一 个 SrootScope 的 子 作用 域 对 象 
boolean 类 型 ， 是 否 不 项 加 一 个 半 透 明 的 背景 幕布 


boolean 类 型 ， 当 切换 到 新 的 视图 时 ， 是 否 隐藏 坟 入 指示 器 
字符 吊 类 型 ， 可 选 ， 放 在 弹出 杠 内 容 区 内 的 HTML 字符 趾 模板 


可 选 ， 在 弹出 框 内 容 区 内 的 HTML 模板 的 URL 


number 类 型 ， 显 示 载 入 指示 器 之 前 要 延迟 的 时 间 ， 以 毫秒 为 单位 ， 默 认为 0， 即 不 延 


number 类 型 ， 载 入 指示 器 持续 时 间 ， 以 毫秒 为 单位 。 时 间 到 后 载 入 指示 器 自动 隐藏 


载 入 指示 器 保持 显示 状态 ， 直 到 调用 hide0 方 法 
show (options) 返 回 值 是 指示 器 显示 时 被 解析 完成 的 promise 对 象 。 
® hide0 
隐藏 当前 加 载 中 的 指示 器 。 返 回 值 是 指示 器 隐藏 时 被 解析 完成 的 promise 对 象 。 
2 . $ionicLoadingConfig 服务 组 件 


用 于 统一 配置 加 载 中 指示 器 显示 时 的 options 参数 ， 未 来 调用 $ionicLoading 组 件 的 show 
方法 时 默认 使 用 该 参数 进行 显示 。S$ionicLoadingConfig 服务 组 件 的 使 用 方法 可 参见 示例 9-7。 
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【示例 9-7】 加 载 中 指示 服务 组 件 使 用 示例 ， 效 果 如 图 9.14 所 示 。 
www\9.4.2.html 的 相关 代码 片段 
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<hl class="title"> 待 收养 小 猫 图 片 列表 </hi><button class="button icon 
ion-refresh" ng-click="load();"> 载 入 更 多 </button> 

</ion-header-bar> 

<ion-content> 
<img collection-repeat="photo in photos" ng-src="{{photo.src}}" 
item-width="50%" item-height="200px"> 

</ion-content> 

</body> 


【代码 解析 】 示 例 代码 使 用 $ionicLoadingConfig 定义 加 载 中 指示 器 的 提示 模板 ,后面 无 须 
再 用 options 参数 即 可 调用 $ionicLoading.show。 每 次 点 击 加 载 更 多 按钮 后 控制 器 会 显示 加 载 中 
指示 器 ， 随 后 在 图 像 数 组 中 加 入 图 像 并 更 新 显示 。 这 里 延 时 2000ms 来 模拟 载 入 的 耗 时 行为 ， 
随后 调用 $ionicLoading.hide0 隐 藏 加 载 中 指示 器 。 





图 9.14 ”加 载 中 指示 器 


轮 播 组 件 


轮 播 是 移动 APP 中 常见 的 UI 类 组 件 。 它 从 一 组 页 面 中 选择 一 个 页 面 投射 到 屏幕 区 域 , 上 
户 可 以 通过 滑动 方式 〈 向 左 或 向 右 ) 进行 切换 。 轮 播 组 件 在 Ionic 里 需要 使 用 ion-slide-box 指 
令 声 明 轮 播 元 素数 组 ,使 用 ion-slide 指令 声明 轮 播 元 素 ，ion-slide-box 组 件 接口 及 其 说 明 如 表 
9.11 所 示 。 












































副 轮 播 元 素 的 图 片 格式 支持 与 所 在 设备 平台 的 浏览 器 内 核 有 关 ， 经 过 试验 有 些 Android 环境 
[ 的 智能 机 无 法 显示 png 格式 ， 因 此 需要 转 成 jpg 格式 。 
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表 9.11 ion-slide-box 组 件 接口 及 其 说 明 















属性 /方法 /事件 ”说 明 
可 选 ，boolean 类 型 ， 是 否 自动 播放 


可 选 ， 事 件 函 数 类 型 ， 当 分 页 器 被 点 击 时 ， 这 个 函数 将 被 传 入 被 点 击 的 分 页 按钮 对 应 的 
页 面 序号 : index 


on-slide-changed | 可 选 ， 事 件 函数 类 型 ， 当 幻灯 片 切 换 时 ， 这 个 函数 将 被 传 入 当前 的 页 面 序号 ;index 


delegate-handle | 可 选 ，string 类 型 ， 定 义 一 个 可 用 $ionicSlideBoxDelegate 来 获取 本 组 件 对 象 的 句柄 名 称 


does-continue 






auto-play 





slide-interval 





show-pager 
pager-click 








【示例 9-8】 轮 播 组 件 使 用 示例 ， 效 果 如 图 9.15 所 示 。 
www\9.5.html 的 相关 代码 片段 
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</div> 


当前 的 专辑 图 片 索引 是 : { {pictureIndex}} 
</ion-content> 
</body> 
【代码 解析 示例 代 码 使 用 7 张 图 片 作为 循环 轮 播 的 页 面 ,并 开启 了 自动 播放 和 循环 播放 。 
通过 声明 的 on-slide-changed 属性 ， 在 图 片 切换 时 获得 当前 的 图 片 索引 并 显示 。 如 果 是 编写 一 
个 音乐 专辑 介绍 的 APP， 则 可 以 很 容易 地 根据 图 片 索引 载 入 专辑 的 介绍 并 显示 在 下 方 文字 区 。 
































图 9.15 轮 播 组 件 








ion-slide-box 组 件 在 Ionic 2.0 后 的 版 本 也 许 会 被 改名 为 ion-slides 组 件 , 属性 接口 也 会 有 相 
[ 应 调整 。 








类 似 其 他 的 用 户 界面 组 件 ，Ionic 中 可 以 使 用 服务 代理 组 件 $ionicSlideBoxDelegate 在 脚本 
中 操作 轮 播 组 件 对 象 ，$ionicSlideBoxDelegate 服务 代理 组 件 接口 及 其 说 明 如 表 9.12 所 示 。 














表 9.12 S$ionicSlideBoxDelegate 服务 代理 组 件 接口 及 其 说 明 






属性 /方法 /事件 
i 当 容 器 尺寸 或 是 页 面 集合 发 生变 化 时 ， 可 能 需要 调用 update0 方 法 重 绘 幻灯 片 
slide(to, [speed]) 切换 到 指定 页 面 。 参数 to 表示 切换 的 目标 页 面 序号 ,参数 speed 表示 以 毫秒 为 音 














位 的 切换 时 间 
enableSlide([shouldEnable]) | 启用 或 禁用 轮 播 组 件 ， 返 回 值 为 轮 播 组 件 当前 的 启用 状态 








previous([speed]) 切换 到 前 一 页 
ee 切换 到 后 一 页 













currentIndex() 获得 当前 页 的 序号 
slidesCountO 获得 全 部 页 面 的 数量 
SgetByHandle(handle) 返回 匹配 handle 字符 串 所 指定 的 轮 播 组 件 实例 


SionicSlideBoxDelegate 的 使 用 与 其 他 服务 代理 组 件 非常 相似 ， 本 书 不 再 额外 给 出 示例 。 
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名 .© ”手势 事件 与 服务 组 件 


Ionic 框架 基于 Cordova 平台 提供 了 移动 设备 的 长 按 手势 事件 on-hold 的 支持 。 由 于 移动 设 
备 通 过 支持 丰富 的 手势 事件 为 用 户 提供 了 良好 的 交互 特性 ， 作 为 模拟 原生 移动 APP 有 优秀 表 
现 的 Ionic, 也 相应 地 支持 了 15 个 主要 的 手势 事件 。 本 节 将 介绍 这 些 手势 事件 以 及 可 用 于 灵活 
管理 视图 元 素 上 的 手势 事件 响应 设置 的 手势 事件 服务 组 件 $ionicGesture。 


9.6.1 lonic 手 势 事件 类 型 
定义 Ionic 视图 元 素 对 手势 事件 的 响应 非常 直接 ， 使 用 类 似 以 下 代码 方式 即 可 : 


<any on-holdq="...">.-..</any> 


其 中 any 代表 任意 元 素 , 而 on-hold 事件 可 以 换 成 表 9.13 中 的 任何 其 他 事件 名 。 括 号 内 填 
入 对 控制 器 中 定义 的 事件 处 理 函数 的 调用 即 可 。 


表 9.13 lonic 支持 的 手势 事件 及 其 说 明 











属性 /方法 /事件 ”说 明 








on-hold 在 一 个 位 置 长 按 ， 持 续 时 间 达 到 500ms 

on-tap 在 一 个 位 置 轻 击 ， 持 续 时 间 不 超过 250ms 

on-double-tap 在 一 个 位 置 两 次 轻 击 

on-touch 在 用 户 点 击 后 立即 触发 

on-release 在 用 户 结束 触 碰 后 触发 

on-drag 点 击 某 个 元 素 后 ， 手 不 离开 设备 屏幕 并 开始 四 处 拖 电 该 元 素 将 会 触发 。 此 时 建议 禁用 该 
元 素 所 在 区 域 的 滚动 功能 〈 实 现 方式 请 参考 本 书 7.2.3 节 中 关于 $ionicScrollDelegate 的 


freezeScroll 方法 ) 
on-drag-up 向 上 拖 电 元 素 时 触发 





on-drag-right 向 右 拖 虑 元 素 时 触发 





on-drag-down 向 下 拖 电 元 素 时 触发 
on-drag-left 向 左 拖 忠 元 素 时 触发 
on-swipe 手指 在 元 素 上 快速 滑动 时 触发 





on-swipe-up 手指 在 元 素 上 快速 向 上 滑动 时 触发 
on-swipe-right 手指 在 元 素 上 快速 向 右 滑动 时 触发 
on-swipe-down “| 手指 在 元 素 上 快速 向 下 滑动 时 触发 
on-swipe-left 手指 在 元 素 上 快速 向 左 滑动 时 触发 














9.6.2 手势 事件 


$ionicGesture 服务 组 件 可 用 于 通过 脚本 动态 注册 与 解除 手势 事件 监听 。 此 外 该 服务 组 件 支 
持 的 手势 事件 也 比 9.6.1 节 以 元 素 属性 方式 声明 手势 事件 的 方式 支持 的 事件 更 多 。 








® on(eventType.callback,$element,options) 
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注册 手势 事件 监听 函数 。 如果 该 指示 器 已 在 显示 状态 , 它 使 用 options 参数 修改 该 指示 器 ， 
并 保持 指示 器 的 显示 状态 。 其 中 参数 eventType 是 支持 的 事件 类 型 字符 串 ， 可 选 的 值 有 hold、 
tap、doubletap 、drag、dragstart、dragend、dragup、dragdown、dragleft、dragright、swipe、swipeup、 








swipedown、 swipeleft, swiperight、 transform. transformstart、 transformend. rotate、\ pinch、 pinchin、 
pinchout、touch、release; 参数 callback 用 于 指定 监听 函数 ， 参 数 $element 是 要 绑 定 事件 的 jqLite 
元 素 ， 可 使 用 angular.element 方法 封装 出 来 :参数 options 一 般 不 需要 传 入 。 该 方法 返回 值 是 
一 个 随后 可 供 调 用 off 函数 解除 监听 时 传 入 的 ionic.gesture 对 象 。 





® off(gesture,eventType, callback) 


解除 手势 事件 监听 函数 。 参数 gesture 是 on0 方 法 返回 的 结果 对 象 ; 参数 eventType 是 解除 的 手 
势 事件 类 型 字符 串 ， 可 用 值 参见 上 面 的 on 函数 同名 参数 ， 参 数 callback 是 要 移 除 的 监听 函数 。 











@ 了 
Soel 键盘 组 件 
在 Android 和 iOS 中 ，Ionic 会 试图 做 弹出 键盘 校正 ， 即 通过 在 视图 里 滚动 输入 控件 或 可 


聚焦 的 元 素 到 可 见 位 置 而 不 让 弹出 的 键盘 遮盖 住 它们 。 因 此 , 可 以 获得 输入 焦点 的 元 素 一 般 需 
要 放置 在 一 个 可 滚动 的 容器 ion-scroll 或 ion-content 指令 内 。 


9.7.1 键盘 插件 

在 获取 焦点 时 ，Ionic 也 会 试图 阻止 原生 的 滚动 溢出 〈overflow scrolling) ， 这 样 可 能 会 
致 布局 问题 ， 比 如 将 顶 栏 挤 出 视图 内 可 见 区 域 。 为 了 避免 这 个 问题 ， 在 Ionic 下 推荐 使 用 键盘 
插件 ionic-plugin-keyboard。 

安装 : 在 项 目的 目录 中 运行 命令 行 cordova plugin add ionic-plugin-keyboard 即 可 。 











坊 为 项 目 增加 了 设备 平台 的 支持 后 需要 再 次 运行 。 | 











编程 接口 : 在 项 目的 目录 中 调用 时 ，ionic-plugin-keyboard 组 件 使 用 的 对 象 名 是 
cordova.plugins.Keyboard，cordova.plugins.keyboard 组 件 接口 及 其 说 明 如 表 9.14 所 示 。 


表 9.14 cordova.plugins.Keyboard 组 件 接口 及 其 说 明 












属性 /方法 /事件 
Cordova.plugins.Keyboard.hideKeyboardAccessoryBar 方法 ， 隐 藏 键盘 上 的 附加 输入 条 
cordova.plugins.Keyboard.close 方法 ， 关 闭 键盘 

cordova.plugins.Keyboard.disableScroll 法 ， 禁 用 滚动 

cordova.plugins.Keyboard.show 法 ， 弹 出 显示 键盘 
属性 ， 键 盘 是 否 处 于 显示 状态 
事件 ， 键 盘 要 显示 前 或 键盘 大 小 切换 时 触发 。 传 入 的 
事件 有 keyboardHeight 属性 代表 键盘 高 度 的 像素 数 
事件 ， 键 盘 要 隐藏 前 触发 


























cordova.plugins.Keyboard.isVisible 





native.keyboardshow 


native.keyboardhide 
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二 区 该 插件 属于 cordova 插件 ， 因 此 其 属性 、 方 法 、 事 件 的 编程 调用 方式 是 用 原生 的 JavaScript 
一 方式， 而 不 用 考虑 匹配 AngularJS 框架 。 











在 键盘 显示 时 隐藏 元 素 : 可 以 使 用 CSS 类 hide-on-keyboard-open， 如 : 


9.7.2 ”悬浮 底 栏 指令 


keyboard-attach 是 一 个 属性 指令 ， 只 能 在 ion-footer-bar 元 素 上 使 用 。 在 键盘 弹出 显示 时 ， 
它 会 导致 ion-footer-bar 元 素 悬 浮 在 键盘 上 方 。 这 适用 于 聊天 类 APP 应 用 中 将 文本 输入 框 放置 
在 底 栏 的 场景 ， 否 则 用 户 的 输入 内 容 将 被 键盘 遮挡 无 法 看 到 。 


也 区 | 该 指令 依赖 TJonic 键盘 插件 ionic-plugin-keyboard。 


在 iOS 中 ， 如果 APP 的 底 栏 内 有 一 个 输入 组 件 input ， 则 需要 调用 键盘 插件 方法 
cordova.plugins.Keyboard.disableScroll(true)。 





该 指令 的 使 用 方法 比较 简单 ， 如 : 


中 .号 小 结 


本 章 介绍 了 Ionic 框架 中 列表 、 表 单 、 对 话 框 、 加 载 提 示 、 轮 播 、 手 势 和 键盘 这 些 用 于 数 
据 展示 与 操作 的 众多 组 件 , 它们 被 广泛 用 于 单个 页 面 上 的 数据 显示 与 获得 用 户 的 操作 交互 , 使 
一 个 APP 应 用 的 功能 最 终 完整 起 来 。 

下 一 章 将 介绍 Ionic 的 内 置 基础 服务 组 件 与 设备 平台 客 制 化 方法 ， 主 要 包含 移动 设备 专 有 
的 事件 处 理 器 、 了 解 具 体 的 设备 平台 版 本 信息 和 如 何 区 分 移动 平台 指定 不 同 的 显示 效果 。 
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lonic 内 置 基础 服务 组 件 与 设备 平台 
各 制 化 


本 章 是 全 书 介绍 关于 Ionic 框架 提供 的 JavaScript 功能 组 件 的 最 后 一 章 , 主要 由 Ionic 提供 

的 操作 或 设置 整个 移动 设备 的 工具 组 件 的 说 明 组 成 。 在 移动 APP 的 开发 过 程 中 ， 不 可 避免 会 
遇 到 需要 注册 移动 设备 专 有 的 事件 处 理 器 、 了 解 具体 的 设备 平台 与 版 本 等 与 开发 PC 版 网 页 不 

- 样 的 活动 。Ionic 将 这 种 类 型 的 功能 组 件 分 类 为 工具 类 组 件 ， 本 章 将 专门 讨论 它们 的 使 用 方 
意 的 事项 。 
本 章 主要 涉及 的 知识 点 有 : 
@ 平台 服务 组 件 
@ 其 他 的 全 局 服务 类 组 件 
@ ”如 何 根据 设备 平台 客 制 化 


























本 章 讨论 的 一 些 组 件 基于 cordova 平台 提供 的 插件 完成 ,使 用 前 需要 安装 ,具体 的 cordova 
[ 平台 插件 介绍 可 以 参考 本 书 第 11 章 的 相关 内 容 。 














平台 服务 组 件 


$IonicPlatform 是 一 个 对 在 本 章 10.2.2 讨论 的 ionic.Platform 对 象 的 部 分 常用 方法 进行 
AngularJS 封装 的 服务 组 件 。 它 提供 了 一 系列 方法 可 用 于 控制 Android 后 退 按钮 的 行为 ， 以 及 
注册 设备 就 绪 后 的 回调 函数 ，$IonicPlatform 服务 组 件 接口 及 其 说 明 如 表 10.1 所 示 。 


表 10.1 SlonicPlatform 服务 组 件 接口 及 其 说 明 





属性 /方法 /事件 


onHardwareBackButton(callback) ”| 绑 定 设备 平台 的 硬件 后 退 按钮 的 监听 事件 











offHardwareBackButton(callback) | 移 除 一 个 硬件 后 退 按 钮 的 监听 事件 
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( 续 表 ) 






属性 /方法 /事件 
registerBackButtonAction(callback, | 注册 一 个 硬件 后 退 按钮 动作 。 当 点 击 按钮 时 ， 只 有 一 个 动作 会 执行 ， 
priority, [actionId]) 因此 该 方法 决定 了 注册 的 后 退 按钮 动作 具有 最 高 的 优先 级 。 例 如 ， 如 
果 一 个 上 拉 菜 单 正在 显示 ， 点 击 后 退 按钮 将 只 会 执行 关闭 这 个 动作 
表 ， 而 不 应 该 继续 返回 一 个 页 面 视图 或 关闭 一 个 打开 的 模 态 框 。 参 数 
priority 代表 为 注册 的 事件 动作 的 设置 的 优先 级 。 目 前 系统 默认 已 有 的 
各 事件 优先 级 有 : 返回 上 一 视图 =100， 关 闭 侧 栏 菜单 =150， 关 闭 模 态 
框 =200， 关 闭 上 拉 菜 单 =300， 关闭 弹 出 框 =<400， 关闭 背景 幕布 =500 
一 旦 设备 就 绪 ， 则 触发 一 个 回调 函数 :如果 该 设备 已 经 就 绪 ， 则 立即 
调用 
注册 Cordova 监听 事件 。type 参数 类 型 为 字符 串 ， 代 表 Cordova 事件 类 
型 ， 可 选 值 与 硬件 平台 支持 参见 表 10.2 




















ready([callback]) 


Cordova 事件 名 称 与 硬件 平台 支持 情况 如 表 10.2 所 示 。 


表 10.2 ”Cordova 事件 名 称 与 硬件 平台 支持 
Android 平台 支持 















阅读 过 Ionic CLI 生成 的 APP 模板 代码 的 读者 对 $IonicPlatform 应 该 不 会 陌生 ， 因 为 在 生 
成 的 代码 里 会 在 AngularJS 的 应 用 模块 里 调用 run 方法 ， 而 其 中 传 入 的 回调 函数 就 是 使 用 
$IonicPlatform 的 ready 方法 来 配置 在 本 书 9.7.1 节 介 绍 的 键盘 插件 : 
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对 $IonicPlatform 其 他 函数 的 调用 ， 读 者 可 以 根据 开发 的 APP 的 需要 进行 定制 。 


10.2 其 他 工具 


除了 10.1 节 介绍 的 平台 服务 组 件 $SIonicPlatform，Ionic 还 根据 开发 者 的 需求 陆续 提供 了 一 
系列 全 局 性 服务 的 组 件 ,功能 范围 覆盖 了 应 用 的 全 局 选项 配置 设备 与 应 用 的 属性 与 管理 方法 、 
视图 的 DOM 操作 支持 与 丰富 的 手势 事件 (目前 有 24 个 ) 监听 支持 。 了 解 和 掌握 这 些 全 局 服 
务 类 组 件 对 开发 功能 齐全 的 移动 APP 非常 重要 。 


10.2.1 应 用 基础 配置 

基于 Ionic 开发 的 移动 应 用 默认 会 采取 跟 应 用 所 在 的 设备 匹配 的 界面 切换 动画 风格 ， 然 而 
如 果 出 于 个 性 化 的 需要 想 定制 修改 移动 APP 这 些 风 格 设置 时 ，S$ionicConfigProvider 组 件 就 可 
以 派 上 用 场 了 。 

使 用 SionicConfigProvider 组 件 有 两 种 模式 : 一 种 是 对 所 有 平台 的 设备 都 设置 相同 的 配置 参 
数 ， 另 一 种 是 设置 配置 参数 时 特别 指定 有 效 的 设备 平台 。 例 如 : 


Sionicconfigprovider.views.naxcache(10); 
是 会 在 所 有 设备 上 执行 视图 最 大 绥 存 的 设置 调整 ， 而 : 
$ionicconfigprovider.platform.android.views.maxCache(5); 


则 只 会 在 Android 设备 上 执行 视图 最 大 缓存 的 设置 调整 。 
$ionicConfigProvider 组 件 关于 修改 应 用 基础 配置 提供 的 方法 及 其 说 明 如 表 10.3 所 示 。 


表 10.3 $ionicConfigProvider 组 件 修改 应 用 基础 配置 的 方法 及 其 说 明 















方法 

views.transition(transition) 设置 切换 视图 时 的 动画 效果 风格 。 参 数 transition 为 字符 串 类 型 ， 
默认 值 为 platform， 代 表 根 据 APP 运行 的 平台 自动 选择 。 其 余 的 
可 选 值 为 los、android 和 none 

views.maxCache(maxNumber) DOM 树 中 缓存 的 视图 数量 上 限 。 到 达 上 限 后 ， 最 后 被 访问 时 间 靠 





前 的 将 被 移 除 。 缓 存 的 视图 将 会 被 保留 它 的 作用 域 对 象 、 当 前 的 
状态 〈state) 对 象 以 及 在 当前 视图 滚动 到 的 位 置 。 当 视图 被 切换 
出 活动 状态 而 处 于 被 缓存 状态 时 ， 它 的 作用 域 对 象 不 在 AngularJS 
的 Swatch 循环 中 被 监控 ， 只 有 视图 被 重新 切换 回 活动 状态 时 才 会 
恢复 监控 。 默 认 的 视图 数量 上 限 为 10 
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Views.forwardCache(value) 





( 续 表 ) 
说 明 
设置 是 否 缓存 下 一 个 视图 (相对 于 当前 视图 在 访问 历史 列表 的 位 
置 而 言 ) 。 参 数 value 为 boolean 类 型 ， 默 认 值 为 false 





Views.SWipeBackEnabled(value) 





是 否 启用 滑动 手势 退回 上 一 视图 的 选项 。 参 数 value 为 boolean 类 
型 ， 默 认为 true。 
注意 : 该 方法 仅 在 iOS 设备 平台 下 有 效 














scrolling.jsScrolling(value) 


是 否 使 用 JavaScript 的 滚动 实现 代 蔡 设备 平台 原生 的 滚动 实现 参 
数 value 为 boolean 类 型 ， 默 认为 tue 





backButton.icon(value) 








回 退 按钮 的 图 标 ， 参 数 value 为 字符 串 类 型 





backButton.text(value) 





回 退 按钮 的 文本 ， 参 数 value 为 字符 串 类 型 








backButton.previousTitleText(value) 











回 退 按钮 的 文本 是 否 使 用 上 一 个 视图 的 标题 名 。 参 数 value 为 
boolean 类 型 ， 在 iOS 设备 平台 默认 为 true 








form.checkbox(value) 


form.toggle(value) 
spinner.icon(value) 


tabs.style(value) 
tabs.position(value) 


templates.maxPrefetch(value) 


navBar.alignTitle(value) 
navBar.positionPrimaryButtons(value) 
navBar.positionSecondaryButtons(value) 





Checkbox 的 显示 风格 。 在 Android 设备 平台 默认 为 square, 在 iOS 
设备 平台 默认 为 circle 

Toggle 的 显示 风格 。 在 Android 设备 平台 默认 为 small， 在 iOS 设 
备 平 台 默认 为 large 

默认 的 加 载 中 指示 器 图 标 ， 参 数 value 为 字符 串 类 型 ， 可 选 值 列表 
可 参考 本 书 9.4.1 

设置 被 选中 的 选项 卡 是 否 显示 指示 条 。 参 数 value 为 字符 串 类 型 ， 
可 选 值 为 striped 和 standard。 在 Android 设备 平台 默认 为 striped， 
在 iOS 设备 平台 默认 为 standard 

选项 卡 栏 的 位 置 。 参 数 value 为 字符 串 类 型 ， 可 选 值 为 top 和 
bottom。 在 Android 设备 平台 默认 为 ttpp， 在 iOS 设备 平台 默认 为 
bottom 

设置 预 取 的 通过 $stateProvider 定义 的 状态 的 模板 数量 上 限 。 参 数 
value 为 number 类 型 ， 默 认 值 为 30 

导航 栏 标题 的 对 齐 方向 。 参 数 value 为 字符 串 类 型 ， 可 选 值 为 
platform，le 人 ，center 和 right。 在 Android 设备 平台 默认 为 left， 
在 iOS 设备 平台 默认 为 center 

导航 栏 首 级 按钮 组 的 对 齐 方向 。 参 数 value 为 字符 串 类 型 ， 可 选 值 
为 platform, left 和 right 在 Android 设备 平台 默认 为 right 在 iOS 
设备 平台 默认 为 left 

导航 栏 次 级 按钮 组 的 对 齐 方向 。 参 数 value 为 字符 串 类 型 ， 可 选 值 
为 platform，left 和 right。 在 Android 设备 平台 和 iOS 设备 平台 都 
默认 为 right 





10.2.2 设备 信息 与 基本 操作 

本 书 第 10.1 节 介绍 的 SIonicPlatform 是 对 ionic.Platform 对 象 的 部 分 常用 方法 的 AngularJS 
服务 封装 。 如 果 需 要 访问 更 多 的 当前 移动 设备 的 信息 或 者 对 整个 APP 应 用 进行 操作 (虽然 出 
现 这 种 需求 的 几率 不 大 ) ， 则 需要 考虑 直接 使 用 全 局 JavaScript 对 象 ionic Platform 组 件 。 





例如 : 


因为 ionic.Platform 组 件 是 全 局 对 象 ， 因 此 使 用 该 组 件 是 无 须 进 行 AngularJS 服务 注入 的 ， 


angular.module ('PlatformApp', ['ionic']) 


.controller('PlatformCtrl', 


function ($scope) {// 此 处 无 须 注入 依赖 


ionic.Platform.ready (function(){ 


De 
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ionic.Platform 组 件 提供 的 方法 与 属性 说 明 如 表 10.4 所 示 。 
表 10.4 ionic.Platform 组 件 的 方法 与 属性 说 明 





方法 /属性 说 明 
ready(callback) 设备 就 绪 后 触发 一 个 回调 函数 (参数 callback) ， 或 如 果 设 备 已 经 就 绪 则 立即 


和 触发。 该 方法 可 以 在 任意 处 运行 。 当 一 个 APP 包含 于 一 个 WebView 中 时 ( 基 
于 Cordova 平台 ) ， 设 备 就 绪 后 它 将 会 触发 回调 函数 。 如 果 该 APP 包含 于 一 
个 Web 浏览 器 中 ， 它 会 在 window.load 之 后 触发 回调 函数 
设置 设备 对 CSS 特性 支持 的 级 别 ， 从 高 到 低 排列 为 a b c 默认 状态 下 ，Ionic 
会 根据 当前 设备 情况 自动 设置 该 级 别 
返回 当前 设备 对 象 〈 这 是 Cordova 提供 的 对 象 ) 
APP 是 否 包含 于 一 个 WebView 中 (基于 Cordova 平台 ) 
是 否 在 iPad 上 运行 
是 否 在 10S 上 运行 
是 否 在 Android 上 运行 
是 否 在 Windows Edge 浏览 器 上 运行 
返回 当前 平台 的 名 字 
当前 设备 平台 的 版 本 
is(Platform 当前 平台 的 名 字 是 否 为 参数 Platform 指定 的 字符 串 
exitAppO 退出 APP 
showStatusBar(shouldShow) | 显示 或 隐藏 设备 状态 栏 〈 基 于 Cordova 平台) 
fullScreen([showFullScreen], | 设置 APP 是 否 使 用 全 屏 模式 〈 基 于 Cordova 平台 ) 
showStatusBar 
isRead 
isFullScreen 





















setGrade(grade) 













device(Q 
isWebView0O 
isIPad() 
isIOS( 
isAndroid() 
isEdse0) 
platform() 
version() 







设备 是 否 就 绪 属 性 
设备 是 否 全 屏 属 性 








platforms 一 个 APP 运行 所 在 的 平台 类 别 属性 的 字符 串 数组 ， 如 : ["browser", "android", 
"android5", "android5 0"] 是 使 用 Chrome 的 模拟 器 模拟 Galaxy S5 的 输出 结果 
| grade 设备 对 CSS 特性 支持 的 级 别 属性 。 属 性 值 范围 参见 本 表 setGrade 方法 的 说 明 
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10.2.3 ”DOM 信息 与 基本 操作 


为 了 弥补 使 用 AngularJS 框架 导致 的 不 能 直接 操作 与 获取 DOM 节点 的 缺憾 , Ionic 框架 提 
供 了 关于 DOM 操作 方法 集 的 组 件 ionic DomUtil ionic DomUtil 组 件 的 方法 及 其 说 明 如 表 10.5 
所 示 。 
表 10.5 ionic.DomuUtil 组 件 的 方法 说 明 

方法 说 明 

requestAnimationFrame(callback) ”| 调用 requestAnimationFrame 函数 ， 如 果 该 函数 不 可 用 则 调用 一 个 同等 
功能 的 polyfill。 这 个 方法 是 用 来 在 页 面 重 绘 之 前 ， 通 知 浏览 器 调用 一 
个 指定 的 回调 函数 参数 callback， 以 满足 开发 者 操作 动画 的 需求 。 这 个 
方法 接受 一 个 函数 为 参数 ， 该 函数 会 在 重 绘 前 调用 。 这 是 浏览 器 支持 
的 标准 方法 ， 不 属于 本 书 详细 介绍 讨论 的 范围 ， 读 者 如 需 深 入 了 解 该 
函数 可 以 参考 网 址 : https://developer.mozilla.org/zh-CN/docs/Web/API/ 
Window/requestAnimationFrame 
animationFrameThrottle(callback) ”| 控制 给 定 的 回调 函数 参数 在 两 个 动画 帧 之 间 ， 最 多 只 能 被 调用 100 
次 这 里 的 回调 函数 参数 callback 是 本 表 介 绍 的 requestAnimationFrame 
方法 的 参数 
getPositionInParent(element) 获取 一 个 元 素 在 容器 内 的 滚动 偏 移 量 。 参 数 element 类 型 为 
DOMElement。 返 回 值 为 对 象 : left 属性 代表 元 素 的 左 端 偏 移 量 ，top 
属性 代表 元 素 的 顶端 偏 移 量 


当 DOM 就 绪 后 调用 一 个 函数 ， 或 如 果 它 已 经 就 结 则 立即 调用 


getTextBounds(textNode) 获取 一 个 textNode 占用 的 矩形 边界 。 参 数 text Node 类 型 为 
DOMElement。 返 回 值 为 对 象 : left 属性 代表 元 素 的 左 端 位 置 ，top 属 
性 代表 元 素 的 顶端 位 置 ，right 属性 代表 元 素 的 右 端 位 置 ，bottom 属性 
代表 元 素 的 底 端 位 置 ，width 属性 代表 元 素 的 宽度 ，height 属性 代表 元 
素 的 高 度 


在 给 定 元 素 的 子 元 素 集 内 获取 指定 类 型 的 第 一 个 子 节点 的 索引 





























getParentWithClass(element, 返回 离 给 定 元 素 最 近 的 指定 CSS 类 的 父 元 素 ， 返 回 值 类 型 为 
className) DOMElement， 如 找 不 到 返回 空 
getParentOrSelfWithClass(element, | 返回 离 给 定 元 素 最 近 的 指定 CSS 类 的 父 元 素 或 元 素 自 身 ， 返 回 值 类 型 
className) 为 DOMElement， 如 找 不 到 返回 空 
由 {xly1.x2y2) 定 义 的 逢 形 内 部 是 否 包含 点 {x 
blurAll0 取消 当前 获取 了 输入 焦点 的 输入 控件 的 选中 焦点 。 返 回 被 取消 的 元 素 
DOMElement 或 返回 空 





10.2.4 ”DOM 元 素 位 置信 息 


$ionicPosition 组 件 是 从 AngularUI Bootstrap 项 目 移植 过 来 , 用 于 提供 元 素 的 位 置信 息 。 使 
用 该 组 件 的 场景 基本 是 当 需 要 显示 提示 类 的 元 素 (工具 提示 tooltip 或 浮动 框 popover) 时 用 锚 
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点 元 素 为 其 找到 应 该 出 现 的 位 置 。 
SionicPosition 组 件 提供 的 方法 有 : 
® position(element) 
获取 指定 元 素 相 对 于 它 最 近 的 具有 相对 位 置 (position:relative) 的 父 级 元 素 的 距离 。 如 果 找 
一 致 。 
® offset(element) 


始终 返回 指定 元 素 相对 于 应 用 的 左上 角 顶 点 距离 。 该 方法 的 语义 与 JQuery 的 同名 方法 一 致 。 


10.2.5 ”事件 管理 

本 章 介 绍 的 $IonicPlatform 和 ionic.Platform 对 全 局 的 事件 管理 都 是 残缺 的 ， 它 们 都 未 提供 
对 已 注册 事件 的 取消 功能 。 此 外 在 某 些 场景 下 (比如 向 客户 演示 复杂 操作 ) 还 需要 模拟 触发 事 
件 。Ionic 专门 提供 ionic.EventController 组 件 用 于 进行 完整 的 事件 管理 。 











ionicEventController 组 件 是 全 局 JavaScript 对 象 ， 虽然 它 的 名 称 里 有 后 级 Controller, 但 是 
[ 它 与 AngularJS 是 没有 关系 的 。 








ionic. EventController 组 件 提供 的 方法 有 : 
@ trigger(eventType, data, [bubbles], [cancelable]) 


触发 一 个 由 eventType 指定 的 事件 ， 事 件 的 数据 由 object 类 型 的 data 参数 传 入 。bubbles 
参数 指定 事件 是 否 在 DOM 中 冒 泡 ，cancelable 参数 指定 事件 是 否 能 被 取消 。 


® on(type, callback, element) 

监听 一 个 元 素 上 的 事件 。 

® off(type, callback, element) 

移 除 一 个 元 素 上 的 指定 的 事件 监听 器 。 

® onGesture(eventType, callback. element. options) 


在 一 个 元 素 上 添加 一 个 手势 事件 监听 器 。 可 用 的 事件 类 型 有 hold、tap、doubletap、drag、 
dragstart、, dragend dragup、 dragdown., dragleft、 dragright、\ swipe、\ swipeup、 swipedown、 swipeleft、 
swiperight、transform、transformstart、transformend、rotate、pinch、pinchin、pinchout、touch、 
Telease。 方 法 的 返回 值 是 一 个 ionic.Gesture 对 象 ， 它 在 后 续 的 offGesture 方法 调用 里 用 于 移 除 
该 手势 事件 监听 器 。 








必 却 目前 支持 的 手势 事件 由 HAMMER JIS 支持 手势 事件 演示 参见 htp/hanmeris eithubio/。| 
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@@ 0 


ffGesture(gesture, eventType. callback) 


移 除 一 个 元 素 上 的 指定 的 手势 事件 监听 器 。 


设备 平台 客 制 化 


为 了 与 特定 设备 平台 的 常用 界面 规范 匹配 ，Ionic 框架 本 身 通 过 调用 ionic.Platform 获得 了 


设备 所 属 了 





F 台 信息 后 ， 会 通过 增加 平台 特定 CSS 类 的 方式 完成 界面 客 制 化 。 简 单 来 说 ， 这 样 





能 达到 开发 人 员 无 须 经 过 枚 举 设备 类 型 而 使 开发 的 同一 个 APP 应 用 在 Android 和 iOS 平台 下 











符合 各 自 3 








F 台 的 原生 应 用 风格 要 求 。 如 果 读 者 所 要 编写 的 移动 APP 需要 更 深度 的 定制 ， 就 需 


要 使 用 本 节 将 要 介绍 的 几 种 客 制 化 方法 了 。 


10.3.1 





设备 平台 CSS 样式 类 


在 基于 Ionic 框架 开发 的 APP 初始 化 的 时 候 ，Ionic 会 根据 APP 运行 的 设备 在 页 面 的 


<body> 标 签 自动 加 上 反映 设备 平台 类 型 的 CSS 类 。 图 10.1 就 通过 使 用 第 9 章 的 示例 打开 调试 


窗口 演示 


了 模拟 使 用 iPhone6 时 ，Ionic 为 <body> 自 动 增加 的 设备 平台 CSS 样式 类 : 


Platform-browser、Pplatform-ios、Pplatform-ios9、Pplatform-ios9 1 。 


242 


轮 播 组 件 ion-slide-box 


朱 前 的 专辑 图 片 素 引 是 : 0 





图 10.1 Ionic 自动 增加 设备 平台 CSS 样式 类 到 <body> 
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设备 平台 CSS 样式 类 主要 分 为 两 大 类 : 

1 . 平台 设备 类 

这 些 CSS 样式 类 主要 是 用 于 Ionic 为 设备 平台 定制 类 似 原生 应 用 的 界面 和 布局 作为 类 似 开 
关 的 CSS 类 。 当然 开 发 人 员 也 可 以 通过 覆盖 这 些 CSS 类 的 定义 来 定制 APP 的 界面 ，CSS 样式 
类 与 说 明 如 表 10.6 所 示 。 

















表 10.6 平台 设备 CSS 样式 类 与 说 明 





CSS 样式 类 名 
APP 是 否 运行 在 PC 浏览 器 上 。 当 使 用 命令 行 ionic serve 方式 调试 
APP 时 将 会 有 该 CSS 类 ， 本 节 的 图 10.1 就 符合 这 个 条 件 
APP 是 否 运行 在 使 用 Cordova 作为 显示 平台 的 设备 上 
APP 是 否 运 行 在 一 个 原生 应 用 的 webview 里 
APP 是 否 运 行 在 一 个 iOS 设备 里 ， 因 此 界面 布局 和 操作 方式 和 iOS 
平台 一 致 
APP 是 否 运 行 在 一 个 iPad 设备 里 ， 会 与 platform-ios 类 一 起 出 现 
APP 是 否 运行 在 一 个 Android 设备 里 ， 因 此 界面 布局 和 操作 方式 和 
Android 平台 一 致 


platform-browser 


Cordova platform-cordova 
Webview platform-webview 


10S platform-ios 





















iPad platform-ipad 














Android platform-android 











2 . 平台 操作 系统 版 本 类 


这 些 CSS 样式 类 由 Ionic 根据 APP 的 宿主 浏览 器 的 User Agent 属性 里 的 操作 系统 版 本 信 
息 生 成 ， 并 增加 到 <body> 标 签 上 。 图 10.1 中 的 platform-ios9，platform-ios9_1 就 属于 此 类 。 它 
生成 规律 是 platform-{ 平 台 代 码 }{ 主 版 本 号 }_{ 副 版 本 号 }。 目 前 版 本 的 Ionic 框架 没有 针对 平 
台 操 作 系 统 版 本 类 的 定制 ， 所 以 它 主要 是 为 开发 人 员 需 要 区 分 设备 操作 系统 版 本 定制 APP 界 
面 而 设计 的 。 
有 了 Ionic 自动 提供 的 平台 相关 的 CSS 样式 类 , 开发 人 员 通 过 更 改 SCSS 样式 表 来 定制 不 
同 平台 的 显示 就 很 容易 了 。 
【示例 10-1】 定 制 平台 相关 的 CSS 样式 类 示例 ， 效 果 如 图 10.2 所 示 。 
scss\ionic.app.scss 的 相关 代码 片段 
.platform-android -bar-header { 
background-image: url('../img/delorean.jpg'); 
background-size: 100% 348px; 
} 
【代码 解析 】 定 制 Android 平台 的 固定 项 栏 的 显示 ， 使 用 指定 的 背景 图 片 显示 。 
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图 10.2 定制 平台 相关 的 CSS 样式 类 给 固定 顶 栏 显示 背景 图 
从 图 中 可 以 看 到 ,模拟 成 Android 设备 Nexus 6P 的 页 面 视图 固定 顶 栏 背 景 显示 成 了 图 片 ， 
而 不 是 固定 色 。 


10.3.2 使 用 AngularJS 客 制 化 平台 风格 示例 


到 目前 为 止 ， 读 者 应 该 已 经 了 解 到 Ionic 框架 提供 了 各 种 丰富 的 了 解 设 备 平台 特性 的 方法 
或 是 CSS 类 用 于 个 性 定制 。 由 于 Ionic 是 基于 AngularJS 框架 的 ， 因 此 官方 推荐 的 定制 方法 也 
是 和 AngularJS 紧密 结合 的 。 本 小 节 将 用 一 个 小 的 示例 来 说 明 其 做 法 。 


【示例 10-2】 使 用 AngularJS 客 制 化 平台 风格 示例 
scss\ionic.app.scss 的 相关 代码 片段 


<script type="text/javascript"> 
// 内 联 方 式 定义 顶级 Controller 
angular.module ('example') .controller('DefaultController', 
function($scope, $window) { 
$scope.backHome = function(){ 
$window.history.go(-1); 
}; 
// 获 取 当 前 的 设备 平台 ， 将 返回 'android' 或 'ios' 
$scope.platform = ionic.Platform.platform(); 
3 
</script> 
<body ng-controller="DefaultController"> 
<ion-header-bar align-title="left" class="bar-royal"> 
<button class="button button-clear icon ion-ios-arrow-back" 
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【代码 解析 在 控制 器 里 通过 调用 本 章 了 解 的 全 局 JavaScript 对 象 的 ionic.Platform 获取 当 
前 的 平台 名 称 。 随 后 首先 对 选项 卡 栏 的 CSS 类 使 用 AngularJS 的 ng-class 进 行 定制 , 设置 Android 
平台 会 显示 选项 卡 指示 条 ，iOS 平台 会 使 选项 卡 图 标 放 在 文本 之 上 。 对 于 标题 为 Confirm 的 选 
项 卡 ， 为 了 跟 原 生 应 用 的 平台 风格 一 致 ， 使 用 ng-attr-icon 来 根据 平台 名 切换 显示 的 图 标 。 图 
10.3 显示 了 通过 Chrome 模拟 两 种 不 同 平台 时 ， 选 项 卡 栏 显示 的 区 别 ， 相 信 通 过 代码 解析 和 图 
片 对 比 ， 读 者 应 该 了 解 了 使 用 AngularJS 客 制 化 平台 风格 的 办 法 了 。 





10.3 使 用 AngularJS 客 制 化 平台 风格 
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民 元 切换 完 模 拟 设备 平台 后 需要 点 击 刷 新 按钮 让 页 面 重新 载 入 ， 否 则 Ionic 不 会 自动 更 新 平台 
[ 对 象 相关 值 。 


10.4 4 等 


本 章 介绍 了 Ionic 的 内 置 基础 服务 组 件 与 设备 平台 客 制 化 方法 ， 主 要 包含 通过 移动 设备 专 
有 的 事件 处 理 器 定制 APP 应 用 、 了 解 具体 的 设备 平台 版 本 信息 和 如 何 区 分 移动 平台 指定 不 同 
的 显示 效果 。 此 外 介绍 的 ionicDomUtil 和 $ionicPosition 组 件 为 开发 人 员 在 不 得 不 操作 DOM 
的 情况 下 提供 了 一 个 编程 入 口 。 

下 一 章 将 介绍 如 何 查找 和 使 用 Cordova 插件 和 Ionic 团队 开发 的 ngCordova 插件 集 来 使 基 
于 Ionic 开发 的 APP 应 用 能 够 调用 手机 硬件 设备 的 专 有 功能 。 
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< 信 助 插件 接近 无 限 可 能 > 





使 用 Ionic 框架 制作 APP 除了 能 使 用 浏览 器 引擎 提供 的 HTML 5 的 功能 集 以 外 , 也 包含 了 
与 手机 硬件 设备 专 有 功能 如 摄像 头 拍照 、 本 地 文件 访问 、 地 理 定位 、 陀 螺 仪 、 振 动 传 感 器 、 推 
送 紧 密 结合 的 无 限 可 能 。 这 种 无 限 可 能 性 是 通过 Cordova 插件 机 制 来 实现 的 , 本 章 将 介绍 如 何 
查找 与 使 用 Cordova 插件 以 及 由 Ionic 开发 团队 包装 的 ngCordova 插件 的 使 用 。 

本 章 主要 涉及 的 知识 点 有 : 

@ 项 目 内 的 Cordova 插件 管理 与 使 用 

@ ”ngCordova 插件 使 用 


























Cordova 插件 


Cordova 的 官方 文档 对 Cordova 插件 功能 的 定义 是 : “一 个 可 使 基于 Cordova Webview 进 
行 泻 染 的 APP 与 原生 平台 进行 通信 交互 调用 的 代码 包 。 它 使 基于 网 页 的 APP 突破 了 不 能 使 用 
设备 平台 完整 功能 的 限制 ”。 因 此 ，Cordova 插件 是 使 用 Ionic 开发 APP 时 调用 设备 平台 完整 
硬件 功能 的 基石 ， 掌 握 在 开源 社区 里 找到 并 使 用 合适 的 Cordova 插件 是 开发 基于 Ionic 的 APP 
应 用 必须 掌握 的 技能 。 











在 能 成 功 安装 和 使 用 Cordova 插件 之 前 必须 先 完成 对 所 支持 的 设备 平台 的 SDK 开发 环境 
[ 的 建立 。 具 体 的 步骤 请 参考 本 书 第 2 章 的 2.2 和 2.3 节 。 














11.1.1 搜索 可 用 的 插件 


目前 社区 提供 的 Cordova 插件 数 有 上 千 个 , 支持 各 种 设备 平台 的 各 类 硬件 特性 , 读者 可 以 
先 到 网 站 http://cordova.apache.org/plugins/ 进 行 搜索 。 除了 根据 页 面 上 提供 的 按 质 量 、 最 近 更 新 
时 间 和 下 载 量 排序 搜索 外 ， 用 户 可 以 在 搜索 栏 内 输入 描述 硬件 特性 的 英文 关键 字 〈 如 file， 
camera 等 ) 。 页 面 会 自动 刷新 显示 与 该 关键 字 匹配 的 插件 列表 供 选 择 。 图 11.1 演示 了 该 网 站 
的 操作 界面 和 可 用 的 插件 列表 示例 。 

选择 将 要 使 用 的 插件 的 时 候 需要 注意 的 要 点 是 : 尽量 选择 更 新 时 间 近 ， 下 载 量 大 的 插件 ， 
这 意味 着 该 插件 的 质量 会 相对 有 所 保证 一 些 。 
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图 11.1 可 用 的 Cordova 插件 网 站 


11.1.2 ”插件 管理 (安装 、 删 除 、 显 示 已 装 插件 ) 

在 图 11.1 所 示 网 站 页 面 里 搜索 到 了 满足 要 求 的 Cordova 插件 后 ， 就 可 以 根据 插件 名 来 安 
装 了 。 在 Ionic 下 安装 Cordova 插件 很 简单 ， 只 要 在 Ionic 应 用 项 目的 目录 下 运行 一 条 命令 即 
可 ， 命 令 格式 为 : 

ionic plugin add {需要 安装 的 Cordova 插件 名 } 

插件 名 为 以 减 号 分 隔 的 多 个 英文 单词 的 组 合 ， 如 : ”cordova-plugin-camera。 安 装 过 程 的 界 
面 如 图 11.2 所 示 ， 可 以 从 图 中 看 到 安装 过 程 其 实 是 调用 npm 来 完成 根据 插件 名 字 查 找 安装 包 
并 下 载 安装 到 本 机 的 。 最 后 也 会 更 新 项 目的 package.json 文件 ， 在 cordovaPlugins 节点 加 入 插 
件 名 。 























图 11.2 安装 Cordova 插件 命 


今 
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正如 安装 命令 一 样 ， 删 除 已 安装 的 Cordova 插件 命令 格式 也 是 在 Ionic 应 用 项 目的 目录 下 
运行 一 条 命令 即 可 ， 命 令 格式 为 : 
ionic plugin rm {需要 安装 的 Cordova 插件 名 } 
ll 除 过 程 的 界面 如 图 11.3 所 示 , 读者 可 以 发 现 项 目的 package.json 文件 也 会 更 新 该 删除 信 














证 














图 11.3 删除 Cordova 插件 命令 








正 因为 安装 的 Cordova 插件 名 记录 都 在 项 目的 package.json 文件 里 , 因此 使 用 任何 IDE 开 
发 工具 的 开发 者 都 可 以 通过 打开 package.json 文件 找到 cordovaPlugins 节点 下 内 容 的 方式 来 查 
看 已 经 安装 的 插件 清单 。Ionic 也 同时 提供 了 一 条 命令 用 于 查看 已 经 安装 的 插件 ， 命 令 为 

ionic plugin 1s 

显示 出 的 信息 如 图 11.4 所 示 。 


[ 国 cmder 






国 cmdee ce 万 目 " 口 " 6 加 = 











图 11.4 显示 当前 项 目 已 装 Cordova 插件 命令 


11.1.3 ”cordova-plugin-battery-status 插件 使 用 示例 


在 图 11.1 所 示 的 网 站 找到 Cordova 插件 后 ， 可 以 直接 点 击 插件 名 ， 页 面 会 跳 转 到 该 组 件 
的 npm 页 面 ， 该 页 面 一 般 会 介绍 所 选 插件 的 安装 方法 和 使 用 文档 。 本 小 节 将 选择 
cordova-plugin-battery-status 示例 讲解 如 何 使 用 一 个 Cordova 插件 。 
首先 通过 运行 安装 命令 来 安装 该 插件 : 
ionic plugin add cordova-plugin-battery-status 
随后 根据 该 组 件 的 npm 页 面 示 例 ， 在 本 书 的 样 例 代 码 中 加 入 window 对 象 对 batterystatus 
事件 的 回调 函数 onBatteryStatus。 





























【示例 11-1】 使 用 cordova-plugin-battery-status 插件 示例 
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www\11.1.3.html 的 相关 代码 片段 





【代码 解析 】 主 要 的 电池 状态 变更 事件 处 理 在 回调 函数 onBatteryStatus 中 , 传 入 参数 对 象 
包含 当前 设备 剩余 电量 级 别 和 是 否 在 处 于 充电 状态 。 这 些 信 息 从 标准 的 浏览 器 中 是 无 从 获取 
的 ， 而 Cordova 以 JavaScript 对 象 的 形式 使 之 在 移动 设备 上 成 为 可 能 。 图 11.5 显示 了 部 署 到 真 
实 Android 设备 上 的 APP 所 在 的 当前 设备 型 号 HUAWEI MT7-TL00 (华为 Mate 7) 。 电 量 发 
生变 更 或 者 充电 线 插入 与 拔 出 时 , 插件 会 生成 batterystatus 事件 从 而 使 APP 弹出 提示 框 显 示 当 
前 设备 剩余 电量 级 别 和 是 否 在 处 于 充电 状态 ， 如 图 11.6 所 示 。 





11.5 ”显示 devicemodel 取 到 的 当前 硬件 设备 型 号 
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图 11.6 充电 线 插入 与 拔 出 时 Android 设备 的 batterystatus 事件 响应 


此 外 读者 可 以 自行 使 用 PC 的 浏览 器 实验 , 这 时 浏览 器 的 控制 台 会 显示 当前 设备 型 号 的 语 
句 报错 为 device 对 象 未 被 定义 ， 而 batterystatus 事件 的 处 理 函 数 也 从 来 都 不 会 被 触发 。 





11.1.4 ”cordova-plugin-whitelist 插件 说 明 


在 进入 下 一 节 介绍 ngCordova 插件 之 前 ， 需 要 对 开发 移动 APP 非常 重要 的 Cordova 插件 
cordova-plugin-whitelist 进行 说 明 , 它 是 用 来 定义 APP 内 可 访问 外 部 网 站 或 数据 接口 的 白 名 单 。 
本 书 将 着 重 介绍 该 插件 常用 的 配置 选项 ， 完 整 的 官方 说 明 可 以 参考 它 的 Github 网 站 : 
https://github.com/apache/cordova-plugin-whitelist。 

安装 : 使 用 Ionic 的 模板 创建 Ionic 项 目 时 cordova-plugin-whitelist 插件 就 已 经 被 自动 安装 
到 项 目 里 了 ， 因 此 不 需要 再 运行 11.1.2 节 的 命令 来 安装 它 。 

使 用 : 默认 的 配置 情况 下 ，Ionic 设置 APP 可 以 访问 所 有 的 外 部 网 站 或 数据 接口 ， 在 开发 
调试 时 该 配置 对 开发 人 员 来 说 很 方便 。 但 是 当 发 布 APP 的 正式 版 本 时 ， 这 将 给 用 户 带 来 安全 
隐患 。 因 此 需要 根据 需求 和 设计 的 最 终 定义 ， 把 APP 可 访问 的 外 部 资源 全 部 列举 出 来 ， 作 为 
白 名 单 的 形式 配置 在 项 目 根 目 录 的 config.xml 文件 内 。 


【示例 11-2】 使 用 AngularJS 客 制 化 平台 风格 示例 
config.xml 的 相关 代码 片段 


<content src="index.html"/> 

<!-- 移 除 对 外 部 资源 访问 的 无 限制 配置 --> 

<!-- <access origin="#*"/> --> 

<!-- 示例 ， 增 加 将 Ionic 文档 网 站 配置 在 白 名 单列 表 内 --> 


<allow-navigation href="http://docs.ionic.io/*" /> 





<preference name="webviewbounce" value="false"/> 


<!-- 允许 通过 短信 和 链接 打开 相关 应 用 --> 


251 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 以 上 的 代码 片段 是 从 config xml 文件 中 摘录 的 被 修改 部 分 。 主 要 目的 是 去 除 
了 默认 的 外 部 资源 访问 的 无 限制 配置 ， 另 外 出 于 演示 的 目的 通过 <allow-navigation> 节 点 将 
Ionic 文档 网 站 配置 在 白 名 单列 表 内 。 随 后 的 三 个 <allow-intent> 节 点 用 于 允许 应 用 内 通过 链接 
打开 设备 内 其 他 指定 类 型 的 应 用 。 

www\11.1.4.html 的 相关 代码 片段 





【代码 解析 】 以 上 的 代码 片段 出 于 演示 目的 在 页 面 视 图 显示 了 两 个 链接 , 分 别 是 在 白 名 单 
中 的 Ionic 文档 网 站 和 不 在 白 名 单 中 的 Baidu 站 点 。 

读者 可 以 尝试 将 APP 部 署 到 智能 手机 设备 后 ， 点 击 页 面 的 两 个 地 址 ， 结 果 将 是 跳 转 Ionic 
文档 网 站 成 功 , 而 点 击 不 在 白 名 单 中 的 Baidu 站 点 则 毫 无 反应 。 在 笔者 的 手机 里 点 击 其 他 链接 
将 弹出 选择 相关 应 用 提示 (短信 和 电话 〉 或 直接 打开 应 用 (地 图 ) ， 运 行 结果 参见 图 11.7。 











图 11.7 点 击 链接 打开 短信 和 电话 应 用 
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EE | 本 插件 只 在 高 版 本 的 移动 设备 上 生效 : Android 和 ios 都 需要 在 4.0.0 及 以 上 。 





ngCordova 插件 集 


在 本 章 11.1 节 介 绍 的 Cordova 插件 ,是 无 法 使 用 AngularJS 的 $scope 对 象 和 依赖 注入 的 ， 
只 能 通过 访问 全 局 的 变量 和 方法 来 调用 ,这 样 会 给 单元 测试 导致 很 多 麻烦 , 也 不 便于 代码 管理 。 
针对 这 个 问题 ，Ionic 开发 团队 在 Cordova API 基础 上 封装 了 一 系列 开源 Cordova 插件 ， 命 名 
为 ngCordova 插件 集 ， 它 们 都 成 为 AngularJS 服务 ， 使 开发 者 可 以 更 方便 地 在 符合 AngurlarJS 
框架 结构 的 代码 中 调用 设备 。 在 本 书 编 写 时 ，ngCordova 已 有 70 多 个 插件 可 供 使 用 ， 本 节 将 
举例 介绍 其 中 一 些 常见 和 重要 的 插件 使 用 方法 。 



































11.2.1 安装 ngCordova 插件 集 

不 同 于 Cordova 插件 ，ngCordova 插件 集 是 需要 使 用 bower 来 下 载 组 件 文件 的 。 但 是 两 者 
方法 类 似 ， 只 要 在 Ionic 应 用 项 目的 目录 下 运行 一 条 命令 ， 格 式 为 : 

bower install ngCordova --save 

安装 过 程 中 会 输出 黄色 文字 的 警告 信息 ， 主 要 是 因为 名 字 非 小 写 的 提醒 信息 ， 应 该 无 碍 ， 
如 图 11.8 所 示 。 


[面条 mu ps l= © ms 


06e44842783\1.3.1 








图 11.8 ngCordova 安装 过 程 提示 


完成 后 ， 需 要 打开 项 目 目录 下 www/index.html 文件 ,在 如 下 位 置 加 入 对 ng-cordova.min.js 
文件 的 引 

















<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=no, width=device-width"> 
<title></title> 
<!-- compiled css output --> 


<link href="css/ionic.app.css" rel="stylesheet"> 
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引入 的 ng-cordovaminjs 文件 的 出 现 位 置 不 能 随意 改变 ， 必 须 出 现在 ionicbundlejs 和 
cordovajs 两 个 文件 之 间 ， 否 则 将 会 在 控制 台 输出 中 看 到 报错 信息 。 


安装 的 最 后 一 步 则 是 将 ngCordova 作为 依赖 的 模块 注入 APP 的 应 用 模块 中 。 一 般 的 做 法 
是 打开 项 目的 应 用 文件 www/js/appjs， 将 ngCordova 模块 注入 
‘angular.module('starter', ['ionic', 'ngcordovarl) 


然后 就 可 以 在 控制 器 (controller) 或 主 模块 里 愉快 地 调用 ngCordova 插件 的 各 个 服务 了 。 


0 对 现 。 ngCordova 插件 只 是 提供 调用 Cordova 插件 的 AngularJS 接口 ， 安 装 ngCordova 插件 不 包 


括 它 将 调用 的 底层 Cordova 插件 ,因此 使 用 ngCordova 的 具体 某 插件 功能 时 ,需要 先 安装 
底层 的 Cordova 插件 。 因 此 本 章 11.2.2 节 的 ngCordova 插件 使 用 示例 也 会 包括 相关 的 
Cordova 插件 安装 过 程 介绍 。 





11.2.2 ngCordova 插件 使 用 步骤 概要 


本 章 的 开始 笔者 介绍 了 ngCordova 已 有 70 多 个 插件 可 供 使 用 , 那么 怎么 根据 开发 APP 的 
需要 找到 合适 的 插件 呢 ? 最 便捷 的 方式 是 到 ngCordova 的 文档 网 站 : 
http://ngcordova.com/docs/plugins/， 它 列 出 了 按 字母 排序 的 所 有 插件 的 帮助 链接 并 提供 搜索 功 
能 ， 如 图 11.9 所 示 。 
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图 11.9 ngCordova 网 站 插件 浏览 页 


根据 名 称 发 现 可 用 的 插件 后 , 可 以 点 击 左 侧 的 插件 链接 , 打开 该 插件 的 说 明 页 , 如 图 11.10 
所 示 。 





[ 回 ) "good oocs usrow sutto -toni srnus 


Se $cordovaActionsheet 





INSTALL 


COMMON IsSUES 








PLUGINS 


Methods 


shov(opclons) 


Fam Npe 
options 。 object 
opuons 





buttonLabeks 





Calenda 











s Cancel bution fof Windows Phone 


图 11.10 ngCordova 插件 $cordovaActionSheet 说 明 页 
图 11.10 所 示 的 说 明 页 里 给 出 了 插件 的 安装 命令 ， 如 图 中 的 插件 的 安装 命令 是 : 


cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin— 
actionsheet .git 
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命令 中 的 cordova 最 好 改 为 ionic， 虽 然 目前 使 用 两 者 无 差异 。 

安装 完毕 后 , 开始 使 用 的 最 快 方式 就 是 寻找 样 例 代 码 测试 运行 , 然后 在 这 基础 上 调整 修改 
以 满足 APP 的 实际 需要 。 样 例 代码 也 在 ngCordova 文档 网 站 的 插件 说 明 页 里 ， 基 本 会 包括 常 
见 的 参数 设置 与 插件 方法 调用 代码 ， 如 图 11.11 所 示 。 


File Transfer 
FieOpener2 
Flashtght 


Example 


medule. controller( ‘Thisctrl’, function($corcovaActionSheet) { 


Launch Navigator 
Local Natfcaton denent .addiventListaner ("davicerendy", fnction () { 


We ScordovaActionsheet.shon(opticns) 


Natve Audo thenCfonction(btrndee) { 
vor index ~ btnindexy 

Network Ds 

}. false); 

OAuth 

Pn Dlalog I 





图 11.11 ngCordova 插件 ScordovaActionSheet 说 明 页 的 样 例 代码 部 分 


ngCordova 插件 的 使 用 模式 一 般 是 将 插件 以 AngularJS 服务 的 形式 注入 需要 调用 插件 的 控 
制 器 内 ， 服 务 的 名 称 基本 为 “Scordova{ 插 件 名 }”。 本 章 随后 的 各 小 节 将 具体 介绍 10 个 常用 
插件 的 样 例 代码 与 解说 , 便于 读者 在 开发 中 直接 参考 。 出 于 演示 的 目的 , 这 些 插件 统一 在 一 个 
页 面 里 被 注入 一 个 控制 器 里 调用 : 

Www\11.2.2.html 的 插件 注入 到 控制 器 相关 代码 片段 





【代码 解析 】 以 上 的 代码 片段 除了 注入 Ionic 和 AngularJS 的 服务 组 件 以 外 ， 另 外 注入 了 
10 个 以 Scordova 作为 前 级 的 ngCordova 插件 服务 组 件 ， 这 样 在 控制 器 的 代码 里 就 可 以 使 用 它 
们 了 。 
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因为 ngCordova 插件 服务 组 件 都 可 能 依赖 于 APP 对 硬件 设备 的 初始 化 完成 , 因此 对 插 
件 的 调用 代码 建议 都 包装 在 $ionicPlatformready0 〇 里， 本 章 后 续 的 各 使 用 示例 都 将 遵循 


| 该 做 法 。 














11.2.3 ”插件 $cordovaDevice 使 用 示例 
ScordovaDevice 插件 主要 用 于 获取 设备 的 基本 信息 , 开发 人 员 可 用 于 判断 某 些 基于 特定 平 
台 或 者 特定 版 本 的 功能 是 否 支持 。 
【示例 11-3】 使 用 插件 ScordovaDevice 示例 ， 效 果 如 图 11.12 所 示 。 
www\11.2.2.html 的 $cordovaDevice 插件 使 用 相关 代码 片段 
// 工 .显示 设备 信息 
$ionicPlatform.ready (function() { 
$scope.showDeviceInfo = function(){ 
alert (' 设 备 平台 : ' + $cordovaDevice.getPlatform() + 
'\n 型 号 : ' + $cordovaDevice.getModel() + 
'\n 版 本 : ' + $cordovaDevice.getVersion()); 
}; 
1); 
【代码 解析 】 在 $ionicPlatform.ready() 里 通过 注入 的 $cordovaDevice 服务 调用 方法 获取 操作 


系统 平台 、 设 备 型 号 和 版 本 号 。 





图 11.12 ScordovaDevice 返回 的 设备 信息 
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11.2.4 插件 $cordovaToast 使 用 示例 


$cordovaToast 插件 主要 用 于 调用 系统 原生 的 Toast 提示 功能 向 用 于 显示 一 条 过 一 段 时 间 
就 消失 的 提示 信息 。 


【示例 11-4】 使 用 插件 ScordovaToast 示例 ， 效 果 如 图 11.13 所 示 。 
Www\11.2.2.html 的 $cordovaToast 插件 使 用 相关 代码 片段 





【代码 解析 】 在 $ionicPlatform.ready() 里 通过 注入 的 ScordovaToast 服务 调用 show 方法 显示 
一 条 过 一 段 时 间 就 消失 的 提示 信息 。 


2. 显 示 Toast 


3. 显 示 联系 人 


nams REED 


4. 显 示 本 地 通知 

















11.13 ”ScordovaToast 弹出 的 toast 提示 信息 
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11.2.5 ”插件 $cordovaContacts 使 用 示例 


$cordovaContacts 插件 可 用 于 调用 系统 设备 原生 的 联系 人 模块 来 完成 创建 、 删 除 、 查 找 联 
系 人 。 


【示例 11-5】 使 用 插件 ScordovaContacts 选择 一 个 联系 人 示例 
Www\11.2.2.html 的 $cordovaContacts 插件 使 用 相关 代码 片段 





【代码 解析 】 在 $ionicPlatform .ready() 里 通过 注入 的 ScordovaContacts 服务 调用 pickContact 
方法 获得 一 个 联系 人 的 完整 信息 对 象 , 并 将 其 转 成 字符 串 。 调 用 pickContact 方法 时 , 会 从 APP 
切换 到 系统 的 原生 联系 人 界面 〈 因 该 界面 不 属于 本 书 编写 的 APP 范围 内 ， 示 意图 略 ) 供 查找 
选取 联系 人 , 返回 后 如 图 11.14 中 显示 我 们 可 以 找到 被 选中 的 测试 联系 人 的 电话 和 电子 邮件 的 
信息 。 


Cd 1015'dlepleyNem 
an -测试 和 
人 ane null*phoneNumbers* 
pe 
le mall: 
“pref ‘alse, value"."test@te 
*“home")],"addresses:null 


rganizations”: 
“pref false'type'custom'， 


“name”:"xxx 公 
司 "birthday’:null,'note":null"photos":n 
ull'categories:null"urls"“null} 





11.14 ”$cordovaContacts 获取 到 的 测试 联系 人 信息 
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11.2.6 插件 $cordovaLocalNotification 使 用 示例 


$cordovaLocalNotification 插件 可 用 于 调用 系统 设备 原生 的 顶部 通知 栏 增加 用 于 通知 用 户 
的 消息 , 这 些 消 息 可 以 编程 定时 显示 以 及 通过 接口 方法 管理 。 本 小 节 将 简单 介绍 立即 显示 通知 
消息 的 功能 ， 其 他 更 加 复杂 的 管理 功能 和 事件 请 读者 自行 参考 ngCordova 网 站 的 
$cordovaLocalNotification 插件 文档 。 


【示例 11-6】 使 用 插件 ScordovaLocalNotification 立即 显示 一 条 通知 消息 示例 ， 效 果 如 图 
11.15 所 示 。 
Www\11.2.2.html 的 $cordovaLocalNotification 插件 使 用 相关 代码 片段 





【代码 解析 】 在 $ionicPlatform.ready0 〇 里 通过 注入 的 ScordovaLocalNotification 服务 调用 
schedule 方法 立即 在 设备 的 顶部 通知 栏 显示 一 条 通知 消息 。 





图 11.15 ”调用 $cordovaLocalNotification 显示 的 通知 信息 


11.2.7 ”插件 $cordovaGeolocation 使 用 示例 


$cordovaGeolocation 插件 可 用 于 调用 系统 设备 原生 的 GPS 传感器 获取 设备 当前 的 地 理 位 
置 以 及 跟踪 位 置 变化 。 本 小 节 将 简单 介绍 获取 设备 当前 的 地 理 位 置 功能 , 跟踪 功能 请 读者 自行 
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参考 ngCordova 网 站 的 $cordovaGeolocation 插件 文档 。 


【示例 11-7】 使 用 插件 $cordovaGeolocation 获取 设备 当前 地 理 位 置 示例 ， 效 果 如 图 11.16 
所 示 。 
www\11.2.2.html 的 $cordovaGeolocation 插件 使 用 相关 代码 片段 


【代码 解析 】 在 $ionicPlatformready() 里 通过 注入 的 $cordovaGeolocation 服务 调用 
getCurrentPosition 方法 获得 当前 设备 所 处 位 置 的 信息 对 象 。 调用 服务 时 需要 指定 设备 的 过 期 返 
回 时 间 ， 并 在 方法 返回 前 使 用 $ionicLoading 显示 了 遮 罩 提示 用 户 正 在 获取 当前 位 置信 息 。 
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5 显示 地 理 信息 


地 理 信息 纬度 : 40.829047 


地 理 信息 经 度 : 111.70542 


地 理 信息 精度 : 40 





11.16 ”ScordovaGeolocation 获取 到 的 设备 地 理 位 置信 息 


11.2.8 插件 $cordovaVibration 使 用 示例 
$cordovaVibration 插件 可 用 于 调用 移动 设备 的 震动 模块 持续 指定 时 间 的 震动 。 


【示例 11-8】 使 用 插件 ScordovaVibration 间歇 震动 示例 
www\11.2.2.html 的 $cordovaVibration 插件 使 用 相关 代码 片段 





【代码 解析 】 在 $ionicPlatform.ready() 里 通过 注入 的 ScordovaVibration 服务 调用 vibrate 方 
法 震动 3 次 ， 每 次 震动 1 秒 ， 震 动 间隔 为 1 秒 。 


11.2.9 ”插件 $cordovaCamera 使 用 示例 


ScordovaCamera 插件 可 用 于 调用 系统 设备 的 摄像 头 模 组 拍摄 照片 或 者 视频 。 本 小 节 将 简 
单 介 绍 获取 拍摄 照片 并 直接 返回 照片 数据 的 模式 (不 存储 到 相册 中 ) ,其 他 模式 请 读者 自行 参 
考 ngCordova 网 站 的 $cordovaCamera 插件 文档 。 


【示例 11-9】 使 用 插件 ScordovaCamera 拍照 并 显示 示例 
Www\11.2.2.html 的 $cordovaCamera 插件 使 用 相关 JavaScript 代码 片段 
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【代码 解析 】 在 $ionicPlatform readyO 里 通过 注入 的 ScordovaCamera 服务 调用 getPicture 方 
法 获得 拍摄 的 照片 图 片 数 据 ,随后 加 上 固定 的 数据 头 返回 给 作用 域 变量 gscope.imgSrc。 随 后 绑 
定 在 <img> 元 素 上 的 $scope.imgSrc 依赖 AngularJS 的 绑 定 机 制 使 图 片 显示 出 来 ， 如 图 11.17 所 
示 。 
Www\11.2.2.html 的 调用 $cordovaCamera 插件 并 显示 拍摄 的 照片 相关 HIML 代码 片段 





11.17 调用 $cordovaCamera 插件 拍摄 照片 并 显示 
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11.2.10 插件 $cordovaSocialSharing 使 用 示例 


$cordovaSocialSharing 插件 可 用 于 调用 指定 的 社交 类 应 用 (Facebook、Twitter 等 ) 或 是 传 
统 的 邮件 、 短信 的 分 享 接口 来 发 布 信息 。 由 于 国情 的 关系 一 些 社交 类 应 用 目前 还 在 墙 外 无 法 使 
用 ， 本 小 节 将 简单 介绍 调用 设备 原生 的 分 享 页 (Share Sheet) 由 用 户 指 定 当前 设备 已 安装 的 可 
分 享 的 APP 来 发 布 一 条 测试 信息 。 其 他 $cordovaSocialSharing 的 调用 方法 格式 都 很 类 似 , 请 读 
者 自行 参考 ngCordova 网 站 的 $cordovaSocialSharing 插件 文档 。 

【示例 11-10】 使 用 插件 $cordovaSocialSharing 利用 设备 原生 的 分 享 页 分 享 信息 示例 ， 效 
果 如 图 11.18 所 示 。 
Www\11.2.2.html 的 $cordovaSocialSharing 插件 使 用 相关 代码 片段 


// 8 .调用 分 享 模块 


$ionicPlatform.ready (function() { 




















Var message = ''; 
Var subject = ' 测 试 ngcordova 分 享 功能 '; 
// 演示 用 图 片 链接 
var link = 'http://placekitten.com/300/200'; 
$scope.nativeShare = function() { 
// 使 用 原生 分 享 页 
S$cordovaSocialSharing.share (message, subject, link); 
}; 
DD); 


【代码 解析 】 直 接 根据 参数 名 调用 $cordovaSocialSharing.share 方法 即 可 。 





久 中 昌 


六 到 用 友 轩 发 尖 续 朋 友 。 汪 05 和 届 收 。。 去 相思 


信息 。 “保存 到 记事 本 上 传 到 中 转 站 通过 邮件 发 送 


RF i A 辣 


图 11.18 ”ScordovaSocialSharing 使 用 设备 原生 的 分 享 页 分 享 信息 
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11.2.11 插件 $cordovaNetwork 使 用 示例 


$cordovaNetwork 插件 可 用 于 获取 移动 设备 的 联网 状态 以 及 跟踪 该 状态 的 变化 事件 (移动 
设备 的 可 移动 特性 使 联网 的 状态 变化 更 加 频繁 ) 。 对 于 可 能 涉及 大 数据 量 传 输 的 视 音频 APP 
来 说 , 侦 测 用 户 的 联网 状态 及 变化 有 利于 进行 用 户 友 好 的 提示 。 本 小 节 将 简单 介绍 获取 当前 设 
备 的 联网 状态 并 根据 状态 变化 动态 显示 其 状态 。 


【示例 11-11】 使 用 插件 ScordovaNetwork 侦 测 用 户 的 联网 状态 及 变化 示例 
Www\11.2.2.html 的 $cordovaNetwork 插件 使 用 相关 代码 片段 
// 9 .获得 联网 状态 


$ionicPlatform.ready (function() { 
$scope.type = $cordovaNetwork.getNetwork(); 
$scope.isonline = $cordovaNetwork.isonline(); 
// 响应 网 络 上 线 事件 
$rootSscope.$on('$cordovaNetwork:online', function(event, networkSstate) { 
$scope.isonline = true; 
1); 
// 响应 网 络 断 线 事件 
S$rootScope.$on('S$cordovaNetwork:offline'，function (event，networkState) { 
$scope.isonline = false; 
Ds 
Es 


【代码 解析 】 在 $ionicPlatform.ready() 里 通过 注入 的 $cordovaNetwork 服务 调用 getNetwork 
方法 获得 的 是 网 络 类 型 。 调 用 isOnline 方法 获取 当前 的 联网 状态 。 通 过 $rootScope.$on 方法 绑 定 
的 事件 处 理 器 对 联网 和 断 网 事件 进行 响应 ， 动 态 更 新 作用 域 上 代表 联网 状态 的 变量 
$scope.isOnline 的 值 。 该 值 被 绑 定 到 前 台 页 面 的 是 否 在 线 字 段 ， 从 而 通过 AngularJS 的 绑 定 机 制 
完成 了 联网 和 断 网 状态 的 跟踪 。 图 11.19 显示 的 是 wifi 正常 模式 和 随即 切换 到 飞行 模式 后 网 络 
状况 的 显示 情况 ， 图 中 是 否 在 线 的 状态 就 发 生 了 变化 。 读 者 不 难 联想 到 使 用 $cordovaNetwork 插 
件 就 可 以 做 到 类 似 微 信 的 根据 网 络 状态 和 变化 提示 用 户 是 否 下 载 打开 视 频 文件 的 提示 功能 











































9. 网 络 状况 


A 类 型 : wifi 


类 型 : wifi 
是 否 在 线 :false 


是 否 在 线 :true 








10.SQLite 





到 11.19 ”ScordovaNetwork 获取 移动 设备 的 联网 状态 以 及 跟踪 该 状态 的 变化 
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11.2.12 ”插件 $cordovaSQLite 使 用 示例 


本 章 最 后 介绍 的 插件 虽然 与 用 户 可 以 见 到 的 前 台 界 面 功能 无 直接 关联 ,但 却 是 大 部 分 应 用 
不 可 避免 地 需要 使 用 的 功能 点 : 大 量 数据 在 设备 上 的 存储 。 由 于 浏览 器 的 Local Storage 有 容 
量 限 制 ， 使 用 SQLite 这 类 小 数据 库存 储 数据 对 于 移动 APP 来 说 是 上 佳 的 选择 。 

完整 的 插件 使 用 和 API 调用 方法 可 参考 该 插件 在 Github 的 网 站 说 明 介 绍 : 
https://github.com/litehelpers/Cordova-sqlite-storage/blob/storage-master/README.md， 本 小 节 将 
简单 介绍 调用 $cordovaSQLite 完成 创建 数据 库 \ 创建 表 与 插入 一 条 记录 并 显示 该 过 程 记录 在 页 
面 上 。 


【示例 11-12】 使 用 插件 ScordovaSQLite 示例 ， 输 出 结果 如 图 11.13 所 示 。 
Www\11.2.2.html 的 $cordovaSQLite 插件 使 用 相关 代码 片段 
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【代码 解析 】$scope.showMessage 用 于 更 新 过 程 记 录 。S$sce.trustAsHtml 是 AngularJS 提供 
的 标准 方法 ， 用 于 非 转 义 地 在 页 面 输出 HTML 内 容 。 由 于 经 过 测试 ， 笔 者 当前 使 用 的 
$cordovaSQLite.openDB 方法 创建 数据 库 不 成 功 ， 因 此 转 而 直接 调用 Cordova 的 
window.openDatabase 方法 。 随 后 的 调用 有 数据 库 应 用 开发 经 验 的 读者 应 该 比较 熟悉 了 ， 就 是 
在 一 个 事务 里 完成 创建 表 和 插入 记录 的 整个 过 程 ， 并 把 该 过 程 输出 到 过 程 记录 中 ， 如 图 11.20 
所 示 。 
www\11.2.2.html 的 显示 操作 SQLite 数据 库 记 录 过 程 的 HTML 代码 片段 


【代码 解析 】 显 示 操 作 SQLite 数据 库 记 录 过 程 的 显示 项 使 用 了 ng-bind-html 指令 来 绑 定 
$scope.messages， 这 样 输 出 的 HTML 不 会 被 转 义 。 


《返回 ng( of 东 例 


10.SQLite 


> before open new DB 

> Opened new DB 

> Dropped exsiting demo_table 
> Created demo_table 

> Inserting Sample Data 

> insertld: 1 





11.20 $cordovaSQLite 操作 移动 设备 数据 库 


11.3 4 等 


本 章 介绍 了 在 能 使 用 浏览 器 引擎 提供 的 HIML 5 的 功能 集 以 外 ， 如 何 使 基于 Ionic 框架 的 
APP 应 用 通过 使 用 Cordova 插件 和 ngCordova 插件 集 能 够 调用 手机 硬件 设备 专 有 功能 , 如 摄像 
头 拍照 、 本 地 文件 访问 、 地 理 定位 、 网 络 状态 监控 、 社 交 分 享 和 SQLite 数据 库 等 。 完 成 本 章 
的 学 习 后 ， 关 于 Ionic 的 开发 知识 就 已 经 告 一 段落 了 。 

下 一 章 将 介绍 如 何 安装 与 搭建 用 于 服务 Ionic APP 应 用 的 后 端 服务 器 环境 ,为 后 续 的 实战 
项 目 做 准备 。 
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后 瑞 服 务 恬 模拟 环境 搭建 惟 备 


-个 完整 的 移动 APP 应 用 是 不 可 避免 地 要 与 后 端 服 务 保 持 数据 交互 的 。 从 获取 新 用 户 的 
注册 资料 、 老 用 户 的 登录 与 档案 (profile) 读 取 操作 到 应 用 数据 的 同步 与 推送 更 新 ， 后 续 第 13 
章 和 第 14 章 的 项 目 实战 就 需要 解决 通过 HTTP (S) 的 API 调用 后 端 (Back End) 服务 问题 。 
虽然 表面 上 看 来 本 章 介绍 的 后 端 服务 开发 内 容 与 使 用 Ionic 开发 前 端 移动 APP 关系 不 大 , 但 是 
具备 一 定 的 后 端 知识 是 能 够 方便 实际 开发 与 维护 中 的 错误 定位 的 。 建 议 读者 可 以 把 本 部 分 作为 
推荐 选 学 内 容 了 解 。 

本 章 采 用 目前 在 互联 网 企业 中 比较 流行 的 MEAN (MongoDB、 Express、 AngularJS、NodeJS 
的 首 字 母 缩写 ) 架构 来 作为 解决 方案 。AngularJS 在 本 书 的 第 3 章 已 有 详细 介绍 ， 而 NodeJS 
作为 Express 的 运行 平台 如 果 不 自行 开发 底层 的 module 也 不 需 深究 ， 仅 需要 了 解 可 以 通过 
require 指令 引入 使 用 工具 包 模 块 和 通过 module.exports 指令 导出 自己 的 模块 即 可 。 因此 本 章 将 
主要 关注 如 何 使 用 MongoDB 和 Express 这 两 个 重要 组 件 为 APP 提供 后 端的 API 接口 。 另 外 本 
章 也 会 涉及 的 Mongoose、Passport 和 Postman 都 被 用 来 完善 或 简化 以 MongoDB 和 Express 作 
为 基础 开发 APP 应 用 的 后 端 API 服务 ， 笔 者 将 单独 以 小 节 的 形式 介绍 它们 安装 和 使 用 。 

本 章 主要 涉及 的 知识 点 有 : 












































@ MongoDB 安装 

使 用 Postman 测试 API 

使 用 Express 编写 API 

使 用 Mongoose 访 问 MongoDB 
使 用 Passport 加 入 用 户 验 证 功能 








本 章 介绍 的 大 部 分 NodeJS 组 件 的 安装 和 使 用 在 Windows 环境 和 Apple OS X 环境 并 无 大 的 差 
异 。 考 虑 到 国内 大 多 数 读者 基本 都 是 使 用 的 Windows 操作 系统 ， 为 了 节省 篇 幅 将 默认 只 介绍 
| Windows 环境 下 的 安装 使 用 。 当 Apple OSX 环境 下 有 和 较 大 区 别 时 ， 笔 者 将 会 单独 说 明 。 














MongoDB 安装 与 测试 
本 书 采用 MongoDB 而 不 是 另外 一 个 也 常见 的 选项 MySQL 作为 数据 库 环境 ， 出 于 以 下 理由 
@ MongoDB 安装 与 运行 非常 容易 , 可 以 达到 基本 无 须 配 置 , 非常 适用 于 产品 原型 开发 。 
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@ MongoDB 原生 支持 自由 的 Schema 模型 ， 能 快速 响应 需求 变化 对 数据 模式 的 要 求 ; 
而 且 MongoDB 非常 容易 输出 JSON 类 的 数据 结果 , 这样 使 前 端 调 用 的 转换 相当 快捷 ， 
尤其 适用 于 我 们 使 用 基于 AngularJS 的 Ionic 框架 。 

@ 经 过 多 年 的 业内 使 用 和 探索 ，MongoDB 已 经 成 熟 和 健壮 ， 常 见 的 场景 都 能 很 容易 
过 搜索 引擎 在 stackoverflow 上 找到 同类 问题 和 解决 方案 的 样 例 代 码 ， 适 合 通 过 复 
粘贴 搞定 问题 而 不 求 深 解 ( 当然 也 不 能 完全 不 懂 ) 型 的 高 手 。 

@ MongoDB 的 单机 性 能 也 相当 可 观 ， 在 项 目的 初期 不 需要 做 很 多 性 能 调 优 配置 。 


因为 本 书 只 是 使 用 MongoDB 来 说 明 移 动 APP 构建 的 完整 环境 ， 而 不 是 建立 一 个 大 规模 
的 生产 服务 系统 ， 因 此 安装 MongoDB 的 免费 社区 版 已 经 足够 使 用 。 读 者 在 实际 工作 项 目 中 ， 
应 该 依据 需要 选择 合适 的 版 本 如 企业 版 。MongoDB 服务 的 社区 版 可 以 到 网 址 : 
https://www.mongodb.com/download-center#community 下 载 。 读 者 可 以 根据 Windows 操作 系统 
的 版 本 下 载 相 应 的 MongoDB 安装 包 msi 文件 ， 然 后 执行 安装 ， 如 图 12.1 所 示 。 














图 12.1 MongoDB 下 载 网 站 


Windows 环境 下 建议 使 用 Custom 的 安装 类 型 ， 这 样 可 以 了 解 MongoDB 主要 文件 的 安装 
目录 ， 参 见 图 12.2。 





庆 MongoDB 3.27 2008R2plus SSL (564 
Choose Setup Type Custom Setup 
Choose the setup type that best suits your needs Select the way you want features to be nstaled. 


Cick the cons n the ree below to change the way features wl be instaled. 


Al program features wil be instaled Requres the most dsk space. 
Recommended for most Users. 


Camm 


Alows users to choose which program featires vl be nstaled and where This featre requres 97xB on your 
they wl be nstalled. Recommended for advanced users hard drive. Ithas 6 of6 
sclected. 
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图 12.2 MongoDB 安装 过 程 
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图 12.3 ”MongoDB 服务 进程 的 启动 过 程 报错 

这 是 因为 Windows 环境 下 MongoDB 默认 的 数据 库 文件 存放 目录 为 c:\data\db\， 而 该 目录 
目前 不 存在 。 依 照 提示 创建 目录 ci\data\db 后 ， 再 次 输入 命令 启动 MongoDB 的 后 台 服 务 进程 。 
这 次 成 功 启动 ， 并 提示 在 端口 27017 等 待 如 图 12.4 所 示 。 





7 .380+0800 1 CONTROL Imainl HotFix KB2731284 or later update is installed, no need to zero-out d 
382+0800 1 CONTROL Linitandlisten] NongoDB starting : pid-8416 "17 dbpath=C: Niata\stb\ 64-bit| 
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data’ 
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图 12.4 MongoDB 服务 进程 的 成 功 启动 提示 





RE 本 书 出 于 方便 演示 的 目的 ， 未 对 MongoDB 的 数据 存放 目录 进行 配置 。MongoDB 提供 了 | 
用 户 自行 指定 数据 库 文件 存放 目录 的 选项 ， 有 需要 的 读者 可 以 参考 网 上 官方 文档 : 
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ 的 “ Set up the| 








MongoDB environment” 一 节 。 J 























Apple OS X 环境 下 推荐 使 用 Homebrew 而 不 是 自行 下 载 安装 包 来 安装 MongoDB: 





@ 首先 更 新 Homebrew 的 包 数 据 库 : 
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brew update 
@ ”随后 安装 MongoDB 的 TLS/SSL 支持 版 : 
brew install mongodb --with-openss1 
@ 安装 完毕 后 ， 与 Windows 环境 下 类 似 ， 需 要 创建 默认 的 MongoDB 的 数据 存放 目录 : 
sudo mkdir -p /data/db 
随后 启动 命令 行 窗口 ， 输 入 以 下 命令 启动 MongoDB 的 后 台 服 务 进程 : 
sudo mongod 


在 以 上 Windows 或 Apple OS X 环境 下 成 功 启动 MongoDB 服务 进程 步骤 后 ， 需 要 
MongoDB 提供 的 基于 JavaScript 的 Shell: 


mongo 
随后 连接 本 机 的 MongoDB 服务 进程 ， 并 运行 数据 库 查 看 命令 测试 是 否 正常 工作 : 
show dbs 


运行 结果 应 该 如 图 12.5 所 示 ， 随 后 可 以 在 命令 行 中 输入 quit0 退 出 : 


388+0808 1 CONTROL [main] Hotfix KB2731284 or later update 








图 12.5 MongoDB 数据 库 查看 命令 测试 


Postman 安装 与 使 用 示例 


使 用 Ionic 开发 出 的 移动 应 用 ， 其 本 质 还 是 一 个 单 页 面 Web 应 用 (SPA: Single Page 
Application) 。 这 个 应 用 与 后 端 服务 器 的 交互 将 主要 通过 调用 后 端 服 务 器 提供 的 Restful 风格 
的 API 完成 。 而 测试 验证 后 端 服 务 器 API 有 效 性 的 需求 ， 就 催生 了 像 Postman 这 样 的 浏览 器 
插件 工具 在 开发 人 员 中 的 流行 。 

按照 官方 网 站 的 口号 ，Postman 是 专门 用 于 帮助 开发 人 员 更 快 开发 API 的 。 具 体 来 说 ， 
Postman 允许 用 户 发 送 任何 类 型 的 HITP 请 求 , 这 就 包括 Restful API 使 用 到 的 GET、POST、 
HEAD、PUT、DELETE 等 , 并 且 可 以 由 开发 人 员 方 便 地 任意 定制 参数 和 HTTP 头 (Headers) 。 
Postman 支持 各 种 流行 的 认证 机 制 ， 包 括 Basic Auth、Digest Auth、OAnuth 1.0、OAnuth 2.0 等 。 
此 外 Postman 的 输出 是 自动 按照 语法 格式 高 亮 并 给 出 语法 解析 结果 的 , 目前 它 支持 的 常见 语法 
包括 HIML、JSON 和 XML。 
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构建 移动 网 站 与 APP: 
安装 Postman 需要 先 登 录 到 它 的 官方 网 站 : https://www.getpostman.com， 找 到 安装 入 
如 图 12.6 所 示 。 











+ a 
§ https /www getpostman com 


Modern software 
is built on APls. 


Postman helps you develop APIs faster. 


加 cm 




















图 12.6 ”Postman 官方 网 站 
随后 读者 可 以 根据 开发 环境 所 在 的 操作 系统 点 击 相 应 链接 进入 安装 启动 页 ， 如 图 12.7 所 


回国 局 三 


3 © Bhttps//chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcd 窜 © 全 


不 。 








@ rorman ET 


eaternosman com 
廊 信 让 站 刘 6760| | Developer Tools 


OvERVIEW REVIEWS 


Runs Ofine 


@ emparpiewinyour dewee 


Supercharge your AP| workiow with 
Postmanl Buildtest and document 
yourAplsfaster More than a million 
developers already do-- 




















图 12.7 Postman 安装 与 启动 
作为 开发 人 员 , 打开 Postman 后 基本 就 可 以 根据 界面 上 的 元 素 直 观 地 找到 输入 HTTP 请 求 
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URL 的 输入 框 尝试 一 下 ， 如 图 12.8 所 示 。 








params 


图 12.8 ”Postman 启动 界面 


作为 简单 示例 ， 本 节 尝 试用 Postman 调用 新 浪 提供 的 IP 地 址 信息 查询 API: 
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=8.8.8.8， 如 图 12.9 所 示 。 


HTTP Method， 可 选 : 
GET，POST，PUT，DELETE 等 

















图 12.9 Postman 返回 的 JSON 对 象 


需要 经 常 使 用 的 一 些 定制 HTTP 请 求 的 配置 选项 , 如 HITP Method、HTTP 参数 和 验证 方 
式 请 参见 图 12.9 中 的 注解 。 从 图 中 可 以 看 到 ， 该 请 求 最 后 返回 了 IP 地址 8.8.8.8 所 在 的 地 理 位 
置信 息 。 

在 确认 Postman 能 正常 工作 后 ， 下 一 节 我 们 将 安装 Express 并 使 用 它 开发 一 个 不 连接 数据 
库 的 简单 数据 维护 API， 随 即使 用 Postman 来 测试 这 个 API。 
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使 用 Express 初始 化 创建 API 示例 


按照 官方 的 定义 ，Express 是 基于 Nodejs 平台 ， 是 一 个 快速 、 开 放 、 极 简 的 Web 开发 框 
架 。 它 承诺 包含 丰富 的 HITP 快捷 方法 和 任意 排列 组 合 的 Connect 中 间 件 , 使 开发 人 员 创 建 


健壮 、 友 好 的 


Express 提供 也 


API 变 得 既 快 速 又 简单 。 因 为 Express 的 这 些 特 点 ， 本 书 的 项 目 实战 将 使 用 
移动 APP 访问 后 台 的 API。 





鹏 元 | Express 的 功能 已 经 相当 丰富 ,完全 理解 应 用 需要 学 习 介绍 Express 和 其 子 组 件 的 专门 书籍 


或 计 
[ 入 i 


座 课程 。 限 于 篇 幅 关 系 ， 本 书 将 只 介绍 解释 后 续 实战 章节 会 涉及 的 功能 部 分 , 不 再 深 
论 Express 的 原理 与 更 多 特性 。 











当 把 Express 用 作 后 端 API 开发 时 , 并 不 需要 使 用 Express CLI 建立 整个 预 设 的 项 目 架 构 ， 
而 是 先 通过 npm init 命令 创建 一 个 node 项 目 (项 目 名 与 所 在 目录 名 express_exam 一 致 ， 其 余 


的 提示 输入 均 


丽 node 





可 直接 按 回 车 键 使 用 默认 值 ) ， 如 图 12.10 所 示 。 


ere | 加 cmdee | 国 nodeee 











随后 通过 


图 12.10 使 用 npm init 命令 创建 node 项 目 express_exam 


npm install 命令 为 项 目 引 入 安装 Express， 用 于 解析 HTTP 请 求 中 的 参数 的 


body-parser 包 和 方便 集合 函数 操作 的 lodash 包 : 
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命令 成 功 执行 后 ,项 目的 package.json 文件 将 会 更 新 ,加 入 对 Express、body-parser 和 lodash 
包 的 依赖 。 
【示例 12-1】 安 装 完 Express、body-parser 和 lodash 包 后 的 package.json 示例 。 
packagejson 代码 





【代码 解析 】 文 件 的 dependencies 一 节 增加 了 对 Express、body-parser 和 lodash 包 指定 版 
本 的 依赖 。 当 把 项 目 目录 〈 因 为 与 运行 的 平台 兼容 性 关系 ， 一 般 不 包含 node_ modules 目录 ) 
复制 到 正式 环境 时 ， 在 项 目 目录 下 运行 npm install 时 将 会 自动 安装 指定 〈 或 更 高 ) 版 本 的 包 。 

外 部 工具 包 安 装 完毕 后 ， 就 可 以 进入 API 的 开发 了 。 本 小 节 的 示例 只 包含 关于 一 个 实体 
对 象 类 的 API， 为 了 更 贴 合 实际 应 用 ， 示 例 代码 应 用 了 Express 的 路 由 (Route) 特性 。 虽 然 这 
会 让 示例 代码 稍 显 复 杂 〈 拆 分 成 了 两 个 JS 文件 ) ， 但 有 利于 演示 将 来 后 端的 领域 对 象 类 别 数 
量 膨胀 扩大 时 ， 如 何 通 过 创建 多 个 路 由 (Routes) 进行 代码 领域 分 离 。 


【示例 12-2】 使 用 Express 开发 的 后 端 API 示例 。 
后 端 服务 主 入 口 indexjs 代码 
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【代码 解析 】 服 务 入 口 代码 完成 的 主要 任务 是 引入 Express 并 使 用 它 创 建 一 个 侦 听 端口 为 

3000 的 HTTP 服务 应 用 。 在 这 过 程 中 引入 了 body-parser 包 作 为 进入 的 HTTP 请 求 的 中 间 件 

(middleware) 用 于 解析 body 部 分 被 编码 的 字段 值 。 此 外 引入 了 项 目 目录 下 的 api/vl/usersjjs 

文件 ， 作 为 访问 应 用 路 径 “/api/vlusers” 的 路 由 (Route) 。 这 样 当 移动 客户 端 访问 该 路 径 的 
API 时 ， 将 由 api/vl/usersjs 文件 类 似 于 中 间 件 (middleware) 一 样 执行 处 理 。 





后 端 用 户 管理 服务 路 由 器 /api/vl/usersjs 代码 
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【代码 解析 】 本 文件 的 功能 聚焦 于 提供 关于 用 户 管理 的 CRUD (Create, Retrieve，Update， 
Delete 的 首 字 母 缩写 ) 操作 API。 为 了 不 引入 太 多 的 新 内 容 ， 导 致 此 处 的 用 户 数 据 集合 直接 初 
始 化 临时 的 样 例 变量 数组 。 

代码 编写 完成 后 ， 直 接 在 项 目 目录 下 通过 命令 行 窗口 启动 后 端 服 务 主 入 口 文件 : 
(node index js 


当 命令 行 窗口 显示 已 在 3000 端口 开始 侦 听 后 , 就 可 以 使 用 12.2 节 安装 的 Postman 来 测试 
验证 编写 的 API 了 ， 如 图 12.11 所 示 。 








图 12.11 启动 后 端 服务 主 入 口 文件 开始 侦 听 


@ ”使 用 HITP 的 GET 方法 测试 http://localhost:3000/api/vl/users， 获 取 用 户 对 象 集 ， 如 
图 12.12 所 示 。 
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| Builder % 便 a 





tatus: 200 OK Time: 24 ms 


























图 12.12 使 用 GET 方法 调用 获取 用 户 对 象 集 API 
Postman 界面 中 下 半 部 分 显示 了 返回 的 JSON 形式 的 用 户 对 象 集 。 


@ ”使 用 HITP 的 GET 方法 测试 http://localhost:3000/api/vl/users/ 李 四 ， 查 找 存在 的 指定 
用 户 对 象 ， 如 图 12.13 所 示 。 





Builder 


























一 = = 














12.13 ”使 用 GET 方法 查找 存在 的 指定 用 户 对 象 API 

Postman 界面 中 下 半 部 分 显示 了 返回 的 JSON 形式 的 单个 用 户 对 象 。 随 后 使 用 

http://localhost:3000/api/vl/users/abc 测试 ， 查 找 不 存在 的 指定 用 户 对 象 ， 期 待 API 返回 404 错 
误 ， 表 明 对 象 找 不 到 ， 如 图 12.14 所 示 。 
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prersy 三 


二 于 | 找 不 到 楷 定 mare 属性 的 用 户 对 象 ! | 





图 12.14 使 用 GET 方法 查找 不 存在 的 用 户 对 象 API 返回 结果 


第 全 章 后 端 服务 器 模拟 环境 搭建 准备 

















Postman 界面 中 下 半 部 分 显示 了 返回 的 错误 信息 ， 右 下 方 的 Status 状态 码 为 404， 也 符合 











设计 的 要 求 。 


@ ”使 用 HTTP 的 POST 方法 测试 http://localhost:3000/api/vl/users/,， 增加 用 户 对 象 。 测试 
时 需要 在 Body 区 域 增加 用 户 对 象 的 name、age 和 retired 属性 ， 并 注意 选择 使 用 
x-WWww-form-urlencoded 的 数据 提交 格式 。 后 端 完 成 用 户 对 象 的 创建 和 插入 后 ， 如 图 


12.15 所 示 将 新 的 用 户 对 象 数组 返回 。 





Builder 


让 














atuc 200DK Time 36 ms 














图 12.15 ”使 用 POST 方法 调用 创建 用 户 对 象 API 
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Postman 界面 中 下 半 部 分 显示 了 返回 的 新 的 用 户 对 象 数组 ，POST 方法 传 过 去 的 用 户 对 象 
已 被 插入 到 数组 中 并 以 JSON 数据 对 象形 式 返 回 。 

@ ”使 用 HTTP 的 PUT 方法 测试 http://localhost:3000/api/vl/users/， 修 改 用 户 对 象 。 测 试 

时 需要 在 Body 区 域 填 入 指定 用 户 对 象 的 name、age 和 retired 属性 ， 并 注意 选择 使 用 

XxX-WWWw-form-urlencoded 的 数据 提交 格式 。 后 端 找到 并 完成 用 户 对 象 的 修改 后 ， 将 新 


的 用 户 对 象 数 组 返回 ， 如 图 12.16 所 示 。 
一 








hrpWlocalhosr3000/apt 证 


PUT ~ hep/hocahosca000/opvusers a save 





body Generate Code 
form-dara 三 xw-www-form-urlencoded b 
四 可 四 ka 
© 50 
@ ra False 
Body (6) tus 200 OK lim: 
vem 



































图 12.16 使 用 PUT 方法 成 功 调用 修改 用 户 对 象 API 
随后 测试 修改 不 存在 的 用 户 对 象 ， 期 待 API 返回 404 错误 ， 表 明 对 象 找 不 到 ， 如 图 12.17 
所 示 。 
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No environment Y © 
hapyocaihasc3000rapil | + 
| 
‖ 
PUT ~ herpJWlocalhosr3000/apuyvi/users/ Params Save 

由 
| Rn jende Body® ereque Generate Code 
| form-dara 。 者 x-www-form-urlencoded raw binary 

四 nn be 3 x Bulk Edit 
| 四 = 50 
| @ -ae false 
| 
| 

Body + {6) Status: 404 Not Found Time: 28 ms 

PR ew | Hm Vv 三 中 QQ 

| 。 清扫 不 到 指定 nane 属 性 的 用 户 对 象 ! | 





图 12.17 使 用 PUT 方法 调用 修改 不 存在 的 用 户 对 象 API 


@ ”使 用 HTTP 的 DELETE 方法 测试 http://localhost:3000/api/vl/users/， 删 除 用 户 对 象 。 
测试 时 需要 在 Body 区 域 填 入 指定 用 户 对 象 的 name 属性 ， 并 注意 选择 使 用 
X-WwWw-form-urlencoded 的 数据 提交 格式 。 后 端 找到 并 完成 用 户 对 象 的 删除 后 ， 将 新 
的 用 户 对 象 数 组 返回 ， 如 图 12.18 所 示 。 








heepWlocalhosc3000/apy | 十 


| orizatior 1ead Body@ e T Generate Code 
form-dara Oxwwwformurencoded © raw © binay 
四 "name 地 四 = x Bulk Edit 
Body Hie Heades (6) < Status 2000K 。 Tme Bms 
































图 12.18 使 用 DELETE 方法 调用 删除 用 户 对 象 API 
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12 .4 使 用 Mongoose 完善 数据 持久 化 示例 


在 12.3 节 的 示例 中 ， 为 了 不 过 快 引 入 太 多 的 学 习 内 容 ， 后 端 数据 层 直接 使 用 最 简单 的 内 
存 中 JavaScript 的 数组 实现 ， 尚 缺 数据 持久 化 的 要 求 未 能 完成 。 本 节 将 弥补 这 个 缺陷 ， 使 用 
Mongoose 包 提供 的 基于 MongoDB 数据 库 的 数据 存 取 层 来 继续 完善 示例 12-2。 

【示例 12-3】 使 用 Mongoose 包 进 行 数据 持久 化 的 改进 版 后 端 API 示例 

更 新 后 的 packagejson 代码 





【代码 解析 】 相 对 于 示例 12-1 的 代码 , 增加 了 对 Mongoose 包 的 引用 ， 并 去 掉 了 对 lodash 
包 的 引用 。 这 是 因为 本 节 不 再 使 用 JavaScript 对 象 数组 作为 存储 层 ， 所 有 的 增删 改 查 操作 将 基 
于 Mongoose 的 接口 。 

更 新 后 的 后 端 服务 主 入 口 indexjs 代码 
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【代码 解析 】 相 对 示例 12-2 的 代码 ， 主 要 是 增加 了 通过 Mongoose 连接 与 断 开 MongoDB 


的 本 地 test 数据 库 操作 。 
更 新 后 的 后 端 用 户 管理 服务 路 由 器 /api/vl/usersjs 代码 
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【代码 解析 】 相 对 示例 12-2 的 代码 ， 主 要 是 把 对 数据 集合 的 所 有 操作 都 改 为 使 用 在 
Mongoose 中 定义 并 创建 的 用 户 对 象 模型 类 完成 。 这 个 用 户 对 象 模型 类 是 通过 引入 项 目 目录 下 
的 /models/user modeljs 文件 定义 的 。 为 了 不 在 代码 里 写 死 用 户 对 象 模型 类 的 相对 路 径 ， 代 码 
里 使 用 process.cwd() 来 获得 项 目的 根 目 录 路 径 。 此 外 需要 区 别 的 是 原来 在 JavaScript 对 象 数组 
中 初始 化 的 数据 集合 已 经 更 改 成 了 在 MongoDB 中 保存 的 方式 。 

新 建 的 用 户 对 象 模型 类 定义 /models/user modeljs 代码 
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Var User = mongoose.model ("User", userSchema); 
// 导 出 用 户 对 象 的 Model 类 


module.exports = User; 
【代码 解析 】 本 文件 主要 定义 用 户 数据 表 的 Schema, 与 关系 型 数据 库 的 DDL 定义 比较 神 
似 ， 只 不 过 是 使 用 JavaScript 对 象 来 作为 定义 对 象 。 另 外 与 关系 型 数据 库 不 同 的 一 点 是 需要 在 
Schema 的 基础 上 创建 模型 类 对 象 ， 真 正 被 导出 在 /api/vl/users.js 中 使 用 的 是 这 个 模型 类 对 象 ， 
如 图 12.19 所 示 。 


























图 12.19 MongoDB 中 初始 化 的 用 户 对 象 数据 集合 查询 结果 


代码 修改 完成 后 的 测试 与 12.3 节 的 步骤 基本 一 致 ， 由 于 API 并 未 做 大 的 变化 ， 因 此 通过 
Postman 调用 后 端 API 显示 的 如 图 12.20 的 结果 界面 与 12.3 节 所 示 的 图 片 也 基本 类 似 。 本 节 不 
必 再 罗列 这 些 Postman 调用 后 的 结果 界面 截屏 , 仅 显 示 所 有 操作 依次 完成 后 最 终 使 用 Postman 
显示 的 用 户 数 据 列表 。 


Bullder 





























图 12.20 MongoDB 中 最 终 的 


从 图 12.19 的 结果 中 可 以 找 出 与 12.3 节 的 结果 存在 显著 差异 的 是 所 有 的 数据 对 象 〈 根 据 
MongoDB 的 术语 是 document) 均 含 有 内 置 的 id 属性 (_id) 和 版 本 属性 (_v) 。 
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[县 由 于 本 书 的 主要 定位 是 介绍 使 用 Ionic 开发 移动 APP， 碍 干 篇幅 笔者 只 罗列 了 使 用 | 


Mongoose 和 MongoDB 开发 供 前 端 测试 所 用 的 后 端 API 的 简单 步骤 ， 并 未 深入 涉及 
MongoDB 的 文档 数据 库 专 有 概念 术语 及 优化 和 Mongoose 提供 的 丰富 接口 。 有 兴趣 的 全 
栈 开发 型 读者 可 以 自行 到 Mongoose 和 MongoDB 的 官方 网 站 深入 学 习 掌握 。 





了 .5 使 用 Passport 加 入 用 户 验证 示例 


完成 了 12.4 节 后 ， 似 乎 后 端 API 的 开发 已 经 完全 掌握 了 。 然 而 跟 实际 的 情况 对 比 ， 还 有 
本 章 相对 最 复杂 的 用 户 身份 验证 部 分 在 前 面 并 未 触及 。 用户 身份 验证 之 所 以 复杂 , 是 因为 这 部 
分 涉及 前 后 端的 密切 配合 、 内 部 与 外 部 众多 社交 应 用 账户 身份 验证 集成 〈 国 外 是 Facebook、 
Google、Twitter 账户 等 ， 国 内 是 微 信 、QQ、 微 博 账户 等 ) 以 及 测试 场景 与 真实 场景 的 不 同 导 
致 的 验证 失败 追踪 定位 等 各 种 因素 。 基 于 篇 幅 和 可 使 用 Postman 测试 出 发 ， 本 节 将 介绍 使 用 
Passport 包 的 local 模块 完成 最 常见 的 本 地 账户 验证 策略 功能 〈 用 户 的 登录 账户 和 加 密 后 的 登 
录 密 码 直 接 存储 在 后 端的 MongoDB 数据 库 里 ) 。 其 余 的 第 三 方 社交 应 用 账户 身份 验证 集成 读 
者 可 以 自行 参考 Passport 的 官方 网 站 (http://passportis.org/docs/) 提供 的 策略 包 和 样 例 来 实现 。 
出 于 内 容 延 续 性 的 考虑 ， 本 节 的 示例 将 在 12.4 节 的 示例 12-3 基础 上 继续 修改 完善 ， 为 用 户 管 
理 API 加 入 验证 的 要 求 。 


【示例 12-4】 使 用 Passport 包 进 行 验证 的 最 终 版 后 端 API 示例 。 
最 终 的 package.json 代码 
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【代码 解析 】 相 对 于 示例 12-3 的 packagejson 文件 ， 代 码 增加 了 对 bcrypt-nodejs 包 ( 用 
于 用 户 明文 密码 的 加 密 和 对 比 验证 )、passport 包 ( 用 于 建立 passport 验证 框架 ) 和 passport-local 
包 的 引用 (用 于 支持 passport 的 本 地 验证 策略 ) 。 
最 终 的 后 端 服务 主 入 口 indexjs 代码 
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【代码 解析 相对 于 示例 12-3 的 indexjjs 文件 , 代码 增加 了 引入 passport 包 和 使 用 passport 
必须 定制 的 登录 策略 配置 模块 ./setup_passport.js。 随 后 在 Express 的 中 间 件 配置 中 把 passport 
包 通 过 passport.initialize() 方 法 的 返回 对 象 引入 。 

最 终 的 后 端 用 户 管理 服务 路 由 器 /api/vl/usersjs 代码 
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【代码 解析 】 相 对 于 示例 12-3 的 usersjs 文件 ， 代 码 里 除了 加 入 引入 passport 包 以 外 ， 有 
3 个 方面 的 大 改动 : 


@ ”除了 增加 一 个 用 户 对 象 的 API 因为 用 于 演示 新 用 户 注册 ， 不 要 求 登 录 验 证 和 外， 其余 
提供 删改 查 功 能 的 API 都 通过 在 处 理 的 管道 里 加 入 passportauthenticate(local) 来 确保 
只 有 成 功 登录 验证 的 调用 才能 执行 后 续 的 访问 数据 操作 , 否则 将 会 返回 HTTP 401 错 
误 到 调用 客户 端 。 

@ ”将 原来 使 用 HTTP GET 方法 获取 用 户 对 象 列表 和 获取 指定 用 户 对 象 的 API 改造 为 使 
用 HTTP POST 方式 。 否则 将 每 次 API 调用 都 需要 传送 的 用 户 名 和 密码 直接 作为 请 求 
URL 的 一 部 分 有 比较 大 的 安全 缺陷 。 

@ ”初始 化 的 用 户 对 象 列表 增加 了 登录 账户 和 密码 两 个 字段 ， 用 于 适应 登录 验证 的 要 求 。 


最 终 的 用 户 对 象 模型 类 定义 /models/user_modeljs 代码 
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【代码 解析 】 相 对 于 示例 12-3 的 user_ modeljs 文件 ， 代 码 里 除了 加 入 引入 bcrypt-nodejs 
包 以 外 ， 有 2 个 方面 的 大 改动 : 


@@ ”用户 对 象 的 schema 加 入 了 logonName 和 password 两 个 字段 用 于 登录 验证 。 

@ ”为 用 户 对 象 的 schema 定义 了 保存 动作 的 前 置 处 理 代码 ， 用 于 将 明文 密码 多 次 加 密 后 
更 新 到 password 字段 。 同 时 又 为 用 户 对 象 的 schema 定义 了 checkPassword 方法 用 于 
登录 验证 时 的 密码 对 比 。 


新 建 的 passport 的 登录 策略 的 配置 模块 setup_passportjs 代码 
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【代码 解析 】 本 文件 主要 用 于 配置 passport 使 用 的 登录 策略 (这 里 是 本 地 模式 ) ， 并 导出 
根据 passport 的 要 求实 现 的 两 个 序列 化 和 反 序 列 化 的 方法 。 在 配置 本 地 登录 策略 时 ， 因 为 后 端 
R 务 提供 的 是 无 会 话 的 API， 因 此 在 选项 里 关闭 了 session〈 网 页 型 应 用 一 般 需 要 打开 ) 。 此 
外 为 了 演示 如 何 定制 ， 笔 者 没有 使 用 默认 的 usemame 和 passoword 字段 ， 而 是 自 定 义 了 两 个 
其 他 的 字段 名 从 前 端 传送 到 后 端 作为 验证 之 用 ， 所 以 需要 在 配置 选项 里 通过 usernameField 和 
passwordField 指出 来 。 

代码 修改 完成 后 的 测试 与 12.4 节 的 步骤 基本 一 致 。 在 MongoDB 的 shell 中 删除 原来 的 上 
户 对 象 数据 集合 后 启动 应 用 ， 可 以 在 shell 中 查 到 按照 新 定义 的 Schema 的 用 户 列表 ， 注 意 其 
中 的 密码 字段 (password) 值 已 经 被 加 密 ， 如 图 12.21 所 示 。 


monco WN i 
































































































图 12.21 更 新 Schema 后 的 初始 化 用 户 对 象 数 据 集合 查询 结果 

除了 每 次 调用 都 需要 加 入 已 有 用 户 的 登录 验证 信息 和 HITP GET 方法 需要 转 为 POST 方 
法 外 ， 后 端 向 前 端 提供 的 API 并 未 有 其 他 变化 ， 因 此 通过 Postman 调用 后 端 API 显示 的 结果 
界面 与 12.4 节 所 示 的 结果 也 大 体 类 似 。 

本 节 不 再 全 部 罗列 这 些 Postman 调用 后 的 结果 界面 截屏 , 仅 演示 区 分 未 提供 登录 信息 、 提 
供 错误 登录 信息 和 提供 正确 的 登录 信息 这 3 种 情况 调用 后 端 API 获取 用 户 数据 列表 的 输出 结 
果 示 例 图 ， 分 别 如 图 12.22~12.24 所 示 。 

| 修一 全 








Builder 


图 12.22 ”不 提供 登录 信息 调用 用 户 对 象 数据 集合 查询 API 结果 
在 图 12.22 中 Postman 显示 返回 HTTP 400 的 错误 代码 ， 表 示 缺 少 登录 信息 。 
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Bulk Ed 





图 12.23 ”提供 错误 的 登录 信息 调用 用 户 对 象 数据 集合 查询 API 结果 
在 图 12.23 中 Postman 显示 返回 HTTP 401 的 错误 代码 ， 表 示 并 未 登录 成 功 。 


| 






Noenvironment ~ 


End 


Bu Edt 


Generate Code 


图 12.24 ”提供 正确 的 登录 信息 调用 用 户 对 象 数据 集合 查询 API 结果 


在 图 12.24 中 Postman 显示 返回 HTTP 200 的 成 功 代码 ， 并 在 下 方 显示 了 取 回 的 JSON 格 
式 用 户 对 象 数据 集合 。 
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12.6 小 


本 章 介 绍 了 如 何 安装 并 使 用 MongoDB 和 Express 这 两 个 重要 的 后 端 服务 器 组 件 为 APP 提 
供 高 效 的 后 端 API 接口 。 随 之 涉及 的 Mongoose、Passport 和 Postman 都 被 用 来 完善 或 简化 以 
MongoDB 和 Express 作 基 础 为 开发 APP 应 用 的 后 端 API 服务 。 随 着 对 本 章 学 习 内 容 的 掌握 ， 
读者 已 经 有 能 力 从 头 到 尾 独立 打造 一 个 基于 Ionic 框架 的 APP 应 用 了 。 

下 一 章 将 进入 第 一 个 Ionic 项 目 实战 ,完成 建立 一 个 旅游 过 程 分 享 与 产品 提供 的 APP 应 用 。 
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项 目 买 战 : 通 认 论 APP 
Vv0.1(UGC+B2C 应 用 ) 


完成 学 习 前 面 章 节 的 Ionic 开发 必 备 的 前 后 端 基础 知识 ， 从 本 章 开 始 就 可 以 进入 完整 的 
APP 开发 了 。 本 章 将 描述 如 何 从 头 到 尾 为 一 个 虚拟 的 互联 网 旅游 公司 建立 名 为 道 遥 游 的 旅游 
游记 分 享 与 旅游 路 线 产 品 提供 基本 功能 的 APP。 其 中 的 游记 分 享 部 分 是 由 APP 的 用 户 来 贡献 

( 即 目前 热门 的 UGC - User Generated Content 模式 ) ， 而 旅游 路 线 产 品 部 分 是 由 该 虚拟 的 互 
联网 旅游 公司 策划 、 维 护 和 提供 服务 〈 即 传统 的 B2C - Business To User 模式 ) 。 

本 章 的 主要 知识 点 包括 : 

@ ”调用 服务 器 后 端的 API 服务 

@ ”使 用 ng-cordova 的 拍照 组 件 

@ 引入 并 使 用 高 德 地 图 API 提供 地 图 标注 和 查看 功能 

@ 定制 生成 APP 的 启动 屏 与 图 标 











本 章 标题 中 的 v0.1 代表 着 完成 的 APP 产品 是 在 一 周 内 快速 迭代 完成 的 初始 产品 。 该 APP 
主要 定位 于 教学 需要 , 后 续 的 性 能 界面 优化 和 功能 丰富 增强 设计 可 由 读者 作为 学 习 本 章 后 
| 的 强化 作业 练习 自行 完成 。 








项 目 和 代码 说 明 


随 着 移动 网 络 的 发 展 ,用 户 已 经 接受 并 且 习惯 通过 手机 分 享 自己 的 生活 点 滴 和 直接 下 单 购 
买 各 种 产品 与 服务 了 。 在 传统 的 携程 和 阿里 旅行 主要 以 提供 飞机 火车 订 票 、 宾 馆 预订 以 及 代理 
其 他 旅行 社 的 产品 商业 模式 之 外 , 也 有 类 似 不 二 之 旅 、 蝉 游记 等 更 注重 其 产品 独特 性 和 用 户 参 
与 内 容 分 享 的 商业 模式 另 避 蹊 径 获得 了 高 价值 的 用 户 支持 。 


























13.1.1 项 目 说 明 


为 了 不 再 重复 接近 于 千 人 一 面 的 电子 商务 APP 模式 ， 本 项 目 设计 成 同时 包含 支持 用 户 参 
与 分 享 内 容 和 提供 旅游 产品 预订 两 大 部 分 业务 功能 。 此 外 APP 里 还 包括 类 似 用 户 登录 、 注 册 、 
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密码 修改 、 账 户 设置 等 基础 功能 。 

在 参考 了 其 他 同类 APP 的 界面 和 Ionic 框架 提供 的 两 种 应 用 模板 特点 之 后 ， 笔 者 决定 从 
Ionic 的 sidemenu 模板 来 开始 道 遥 游 APP 的 整体 界面 布局 设计 。 

在 用 户 分 享 游记 部 分 ，APP 需要 提供 对 拍照 和 图 片上 传 的 支持 ， 因 此 将 引入 ng-cordova 
的 拍照 组 件 和 直接 利用 HIML 5 的 文件 上 传 组 件 来 提供 支持 。 此 外 为 用 户 提供 的 照片 地 图 定 
位 设置 功能 是 常见 的 需求 ， 因 为 众所周知 的 原因 ， 谷 歌 地 图 的 API 服务 目前 在 中 国 是 不 太 稳 
定 的 。 项 目 里 将 引入 高 德 地 图 API 来 演示 如 何在 Ionic 框架 里 进行 地 图 功能 的 集成 。 

面向 终端 用 户 的 界面 质量 要 求 都 相对 比较 高 ， 因 此 项 目 里 对 Ionic 提供 的 配色 和 布局 方案 
都 进行 了 一 定 改造 和 扩充 ， 使 界面 更 加 活泼 和 具有 现代 感 。 笔 者 并 不 是 专业 的 界面 设计 人 员 ， 
项 目 里 的 配色 和 布局 方案 只 是 作为 技术 实现 的 说 明 来 设计 实现 的 。 读 者 也 可 以 通过 对 照 阅读 和 
修改 项 目的 模板 文件 和 本 书 4.4.2 节 介绍 的 ionic.app.scss 文件 来 定制 出 自己 满意 的 界面 效果 
来 。 




















13.1.2 ” 随 书 代码 运行 说 明 
读者 可 以 先 在 电脑 上 运行 测试 已 完成 的 整个 项 目 , 再 进入 阅读 后 续 的 设计 和 实现 内 容 , 需 
要 执行 以 下 步骤 : 
@@ 随 书 源 代 码 的 整个 ch-travel-app 目录 到 本 机 的 任意 文件 夹 下 ， 如 
“ci\temp\ch-travel-app” 。 
@ ”启动 MongoDB， 执 行 步骤 参考 本 书 12.1 节 。 
@ 启动 NodeJS 执行 文件 “安装 目录 \ch-travel-app\back-endveasego-express\index.js”， 执 
行 步骤 参考 本 书 12.3 节 。 
@ ”编辑 文件 “安装 目录 \ch-travel-app\front-end\easego_ionicWwww\js\services.js”， 将 如 下 
代码 中 的 192.168.1.80 改 为 本 机 的 也 地 址 : 
”rootUrl": "http://192.168.1.80:3000'，// 需 要 改 为 后 端 服务 器 的 地 址 
@ 在 “安装 目录 \ch-travel-app\front-endveasego_ionic\” 目 录 下 执行 Ionic CLI 命令 : 
ionic serve 
@ ”随后 在 浏览 器 自动 加 载 的 应 用 界面 里 就 可 以 使 用 测试 账户 ( 用户 名 : test1， 密 码 : 
111111 ) 来 测试 了 。 
@ ”测试 完毕 需要 终止 NodeJS 进程 。 


13.2 功能 设计 


根据 13.1 节 的 项 目 说 明 ， 遂 遥 游 APP 主要 由 5 大 部 分 的 功能 集 组 成 ， 分 别 是 : 
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侧 栏 菜单 
旅游 行踪 
我 的 足迹 
预约 旅行 产品 
设置 


这 5 大 功能 集 与 其 内 部 的 主要 子 功 能 可 参考 图 13.1 所 示 的 道 遥 游 APP 整体 功能 结构 图 。 
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ne ee. } 
“ 
， 


图 13.1 遂 遥 游 APP 整体 功能 结构 图 


需要 说 明 的 是 ， 图 13.1 中 除 侧 栏 菜单 的 每 个 菜单 项 以 外 ， 每 个 子 功能 后 括号 内 的 内 容 有 
两 种 表现 形式 ， 它 们 之 间 的 重要 区 别 是 : 
@@ 以 “app.” 为 前 组 的 子 功能 设计 为 Angular-UI 项 目的 路 由 模块 (angular-ui-router) 中 的 
一 个 状态 (state ) ， 而 这 些 状态 将 共用 一 个 抽象 的 根 状态 “app”， 它 将 负责 载 入 本 
书 8.3 节 提 及 的 侧 栏 菜单 框架 模板 ， 提 供 子 状态 用 于 切换 展现 的 容器 。 本 章 13.3.3 
节 的 代码 解析 部 分 将 能 见 到 这 部 分 的 代码 说 明 。 
@ ”其 他 无 “app.” 前 缓 的 子 功能 被 设计 为 使 用 本 书 9.3.1 节 介 绍 的 Ionic 的 模 态 框 来 实现 。 
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13.2.1 界面 与 功能 概述 
1 . 界面 配色 定制 


面向 大 众 的 APP 比较 重视 界面 的 观感 ， 因 此 选择 和 定制 界面 的 配色 是 不 可 轻视 的 一 个 环 

节 。 本 项 目 出 于 演示 的 目的 ， 直 接 依据 Google 的 Material Design 设计 指导 

(https://github.com/google/material-design-lite), 在 其 推荐 列表 中 分 别 选 取 了 代号 为 Light Green 

和 Orange 的 两 个 调 色 板 作为 颜色 搭配 的 组 合 ， 参 见 图 13.2 所 示 。 图 中 有 箭头 指示 的 颜色 为 被 
选中 使 用 的 色彩 。 





13.2 ” 遂 遥 游 APP 的 配色 方案 


因此 遂 遥 游 APP 将 依据 项 目 选 定 的 配色 方案 ， 在 /scss/ionic.app.scss 中 进行 相应 的 颜色 重 
定义 ， 如 : 








前 3 个 颜色 变量 是 Ionic 有 默认 定义 而 被 项 目 覆盖 的 ， 而 第 4 个 $highlight 是 新 增 的 定义 。 

2 . 侧 栏 菜单 

道 遥 游 APP 通过 侧 栏 菜单 为 用 户 提供 在 不 同 主要 功能 动态 跳 转 的 方式 ， 同 时 菜单 也 会 根 
据 用 户 的 登录 状态 而 动态 调整 显示 的 可 选 菜单 项 和 用 户头 像 的 内 容 。 图 13.3 和 13.4 分 别 演 示 
了 用 户 在 登录 和 未 登录 状态 下 菜单 的 显示 情况 。 
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图 13.3 用 户 已 登录 状态 下 的 侧 栏 菜单 区 域 显示 。 图 13.4 用 户 未 登录 状态 下 的 侧 栏 菜单 区 域 显示 

3 . 旅 友 行踪 

作为 以 UGC 为 特点 的 遂 遥 游 APP， 旅 友 行踪 功能 的 首页 ( 即 登录 用 户 发 布 公开 的 游记 列 
表 ) 将 作为 整个 应 用 的 默认 首页 ， 如 图 13.5 所 示 。 

用 户 点 击 任何 游记 的 封面 图 片 后 , 将 能 跳 转 到 该 游记 的 阅读 页 对 某 个 游记 的 图 文 片段 进行 
点 赞 和 评论 。 点 击 图 13.5 中 的 固定 位 置 绿色 圆 形 按钮 后 ， 将 会 转 到 用 户 创建 自己 的 游记 功能 
页 面 。 

此 外 在 图 13.5 中 因为 静态 图 的 关系 而 未 能 展现 上 拉 载 入 更 多 和 下 拉 刷 新 的 功能 ， 它 们 将 
利用 在 本 书 7.2.4 和 7.2.5 节 分 别 介绍 过 的 ion-infinite-scroll 和 ion-refresher 组 件 并 结合 后 端的 
数据 获取 API 来 实现 。 

4 . 我 的 足迹 

该 功能 集 的 实质 是 为 已 登录 用 户 提供 编辑 维护 和 发 布 自己 创作 的 游记 图 文 内 容 。 图 13.6 
演示 了 一 个 普通 用 户 的 “我 的 足迹 游记 ) ”列表 中 显示 的 两 类 游记 (已 发 布 与 未 发 布 ) 。 点 
击 任何 游记 的 封面 图 片 后 ,用 户 将 进入 编辑 维护 模式 ，13.3.6 节 将 会 详细 描述 这 些 功 能 与 实现 
方式 。 
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我 的 足迹 (游记 ) 








图 13.5 旅 友 行踪 功能 的 首页 图 13.6 我 的 足迹 功能 的 首页 

5 . 预约 旅行 产品 

预约 旅行 产品 功能 集体 现 了 道 遥 游 APP 的 B2C 特点 。 虽 然 不 涉及 网 上 支付 ， 但 将 具备 基 
本 的 各 系列 〈 种 类 ) 产品 浏览 和 下 订单 功能 ， 其 主要 商业 目的 是 带 来 销售 线索 ， 如 图 13.7 所 
示 。 当 然 有 兴趣 的 读者 可 以 考虑 与 第 三 方 的 支付 服务 商 对 接 ， 加 入 诸如 促销 、 团 购 、 支 付 、 退 
款 和 商品 评价 等 更 加 丰富 的 功能 实现 。 

从 图 13.7 中 可 以 看 到 ， 道 遥 游 APP 对 次 级 固定 项 栏 进行 了 定制 ， 使 其 呈现 半 透 明 风格 ， 
克服 了 Ionic 原生 固定 顶 栏 界面 的 纯色 背景 比较 死板 的 展现 形式 。 而 产品 种 类 大 图 下 的 各 产品 
的 缩 略 图 滚动 轴 是 利用 本 书 7.7.2 节 介 绍 的 内 容 滚动 容器 ion-scroll 定制 实现 的 。 具体 的 产品 详 
情 页 与 订单 提交 页 的 功能 与 实现 方式 将 会 在 13.3.7 节 详 述 。 


6 . 设置 


与 大 多 数 APP 应 用 的 设置 功能 布局 类 似 ， 主 要 是 提供 用 户头 像 的 上 传 、 个 人 资料 的 编辑 
更 新 与 密码 的 维护 ， 如 图 13.8 所 示 。 而 尚未 实现 的 “您 的 建议 ”功能 比较 简单 ， 读 者 可 以 上 
来 练习 ionicModal 的 使 用 。 
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账户 设置 
修改 密码 


您 的 建议 (自行 练习 实现 ) 


) -经 典 产 经 典 产品 1 - 经 典 产 
1 品 1 的 介绍 品 2 的 介绍 


B8838 价格 ， 站 83.883 放生。 。 了 8868 人 和 : 





图 13.7 预约 旅行 产品 功能 的 首页 图 13.8 设置 功能 








13.2.2 ”服务 端 API 接口 概述 


13.2.1 节 介 绍 的 都 是 前 台 展 现 的 业务 功能 ， 然 而 展现 的 内 容 是 存储 在 后 台 服 务 端 数 据 库 
(无 论 是 传统 的 SQL 或 是 目前 流行 的 NoSQL) 并 通过 访问 接口 来 获取 到 前 端 设 备 上 的 。 
针对 遂 遥 游 APP 的 主要 业务 对 象 ， 其 服务 端 API 主要 提供 了 4 类 数据 实体 的 访问 接口 : 


@。 用户， 接口 文件 路 径 为 : back-end/easego-express/api/vl/users.js 

@ 游记， 接口 文 件 路 径 为 : back-end/easego-express/api/vl/articles.js 

@@ ”产品 ， 接 口 文件 路 径 为 : back-end/easego-express/api/v1/products.js 

@@ ”客户 订单 ， 接 口 文件 路 径 为 : back-end/easego-express/api/v1/pos.js 

由 于 服务 端 API 的 编写 不 属于 本 书 详细 介绍 的 内 容 范围 。 限于 篇 幅 的 关系 ,服务 端的 API 


代码 本 书 不 会 单独 介绍 , 感 兴趣 的 读者 可 以 自行 阅读 代码 与 其 中 相应 的 注释 。 但 是 对 相关 服务 
端 API 的 调用 将 会 在 各 功能 的 服务 实现 小 节 中 提 及 以 保证 内 容 逻 辑 的 完整 性 。 





1 本 .了 功能 实现 


通过 13.1 和 13.2 节 的 介绍 ， 想 必 读 者 已 经 对 应 用 的 大 致 功能 有 了 初步 了 解 。 从 本 节 开 始 
笔者 将 介绍 道 遥 游 APP 的 测试 运行 和 功能 代码 实现 解析 ， 读 者 可 以 在 本 节 通 过 实际 运行 与 结 
合 代 码 阅读 改写 来 熟悉 使 用 Ionic 开发 应 用 的 整个 过 程 。 
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13.3.1 准备 工作 : 部 署 服 务 器 端 环境 

在 进入 编写 前 端 APP 代码 之 前 ， 首 先 需要 保证 服务 端 API 的 可 用 ， 因 此 第 一 步 是 完成 服 
务 器 端 环境 的 部 署 与 测试 验证 其 正常 工作 。 本 小 节 介绍 的 大 部 分 内 容 都 是 本 书 第 12 章 学 习 过 
的 ， 因 此 具体 的 软件 或 服务 安装 过 程 这 里 不 再 详细 介绍 : 

1 . 复制 服务 器 端 目 录 并 运行 npm 包 安 装 命令 

将 随 书 代码 里 路 径 “ch-travel-app\back-end\” 下 的 easego-express 目录 复制 到 本 机 上 ， 并 
调整 uploads 和 avatars 两 个 目录 的 权限 ， 去 掉 只 读 属性 。 因 为 道 遥 游 APP 的 游记 图 片 和 用 户 
的 头像 上 传 功能 均 会 导致 对 它们 写 入 文件 。 

随后 在 easego-express 目录 下 的 命令 行 运行 : 






































cnpm install 

这 样 将 会 安装 该 后 端 NodeJS 项 目 依赖 的 npm 包 。 

2 . 启动 mongodb 

如 果 尚 未 启动 MongoDB 的 后 台 服 务 进程 ， 则 在 命令 行 运行 命令 启动 : 

mongod 

3 . 启动 easego-express 目录 下 的 index.js 文件 

在 命令 行内 进入 步骤 1 中 的 easego-express 目录 ， 随 后 运行 命令 启动 : 
node index.js 

4 . 使 用 mongo 查询 easego 数据 库 是 否 已 被 初始 化 

步骤 3 成 功 执 行 后 将 会 连接 并 初始 化 easego 数据 库 ， 因 此 这 里 需要 通过 mongo 查询 该 数 

据 库 是 否 已 成 功 建立 ， 输 出 的 内 容 应 如 图 13.9 所 示 ，easego 数据 库 会 出 现在 数据 库 列 表 中 : 





图 13.9 使 用 mongo 查询 easego 数据 库 是 否 已 被 初始 化 
5 . 使 用 postman 测试 接口 














最 后 一 步 就 是 使 用 postman 验证 测试 服务 端的 API 接口 是 否 能 正常 提供 数据 了 .按照 本 书 
12.2 节 的 内 容 ， 在 postman 使 用 GET 方法 直接 调用 http://localhost:3000/api/v1/products/list 来 
测试 是 否 能 获取 到 笔者 已 经 在 代码 里 自动 载 入 的 测试 数据 记录 集 。 正 常情 况 下 应 该 如 图 13.10 
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所 示 ， 有 多 个 用 于 测试 的 产品 记录 返回 。 


hplocalhosr3000/apil 十 


GET Y hapVniccalhosc300D/apivVproducsntisr 








13.10 ”使 用 postman 测试 服务 端的 API 接口 是 否 已 经 可 用 


13.3.2 ”初始 化 项 目 设置 与 目录 结构 


1 . 使 用 lonic CLI 初始 化 项 目 目录 
在 13.1 节 的 项 目 说 明 里 决定 了 使 用 Ionic 的 sidemenu 模板 作为 道 遥 游 APP 的 开发 起 点 ， 
因此 可 以 用 如 下 命令 来 初始 化 应 用 









草 亏 | 如 果 读 者 从 头 构建 一 个 Ionic 的 APP 推荐 用 ionic CLI 来 初始 化 项 目 ， 而 如 果 读 者 只 是 通 
| 过 源码 的 复制 查看 逍遥 游 APP 应 用 目前 的 整体 代码 结构 并 修改 完善 ， 则 无 须 运行 上 面 的 
初始 化 命令 。 








命令 中 具体 各 参数 的 含义 读者 可 使 用 如 下 命令 查看 详情 : 





2 . 为 项 目 安装 配置 SASS 支持 
随后 可 以 在 目录 运行 以 下 命令 使 项 目 切换 成 使 用 SASS 来 编写 CSS 文件 : 
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者 可 参考 Jonic 官方 网 站 的 说 明文 档 http:/ionicframework.conydocs/cli/sasshtml 来 自行 手工 


副 由 于 命令 的 运行 会 在 其 内 部 调用 npm install, 在 国内 的 网 络 环境 下 有 可 能 会 出 错 退 出 。 读 
[ 安装 项 目 对 SASS 的 支持 。 











3 . 复制 引入 第 三 方 JS 库 


遂 遥 游 APP 将 使 用 本 书 4.2 节 介 绍 的 lodash 库 用 于 从 服务 后 端 获取 到 数据 集合 的 处 理 支 
持 ， 因 此 需 将 笔者 使 用 的 lodash 库 文 件 lodash-4.13.1js 复制 至 
ch-travel-app\front-end\easego ionicwww\lib 目录 下 ， 并 将 其 引入 到 
ch-travel-app\front-endveasego_ionicvwww 目录 下 的 index.html 文件 中 。 

在 13.1 节 里 提 及 需 引入 的 高 德 地 图 API 服务 是 以 在 线 服务 的 方式 提供 的 ， 因 此 无 
复制 JS 库 文件 到 项 目 目 录 中 ， 而 是 需要 参考 其 在 线 

( http://lbs.amap.com/api/lightmap/guide/summary/ ) 申请 开发 者 KEY 并 引 
ch-travel-app\front-end\easego ionic\Wwww 目录 下 的 index.html 文件 中 。 





须 额 外 
文 档 
| 入 于 


ke 








随 书 代码 里 ch-travel-app\front-end\easego ionicwww\index.html 文件 中 已 经 引入 了 高 德 地 
图 API 服务 ， 其 中 填 入 的 KEY (9d68eeba626eb0eaf2a2cafa2c98c292) 是 笔者 本 人 申请 用 
于 开发 测试 的 。 强 烈 建议 读者 自行 申请 并 更 改 该 值 ， 否 则 有 多 人 同时 使 用 可 能 会 被 封号 导 
致 API 服务 不 正常 而 影响 读者 的 测试 开发 。 


| @ 











4 . 安装 ngCordova 插件 集 


遂 遥 游 APP 将 使 用 多 个 ngCordova 插件 , 因此 需要 参考 本 书 11.2.1 的 步骤 和 前 端 Ionic 项 
目 目录 下 的 package.json 文件 安装 配置 用 到 的 ngCordova 插件 集 ， 有 具体 的 步骤 不 再 重复 说 明 。 


5 . 设置 对 Android 平台 的 支持 


由 于 Windows 环境 下 的 工具 集 比 较 全 面 ， 笔 者 主要 选择 在 Windows 下 进行 道 遥 游 APP 
的 开发 测试 , 测试 机 也 为 Android 系统 的 手机 。 在 测试 需要 一 些 手 机 硬件 配合 才能 完成 的 功能 
时 ， 需 要 把 应 用 测试 包 安装 在 实体 机 上 。 因 此 需要 参照 本 书 2.2.2 节 的 做 法 为 逍遥 游 APP 添加 
Anroid 平台 支持 ， 有 具体 的 步骤 不 再 重复 说 明 。 

6 . 创建 AngularJS 的 服务 ( Service ) 与 过 滤器 ( Filter ) 定义 JS 文件 

Ionic 默认 生成 的 代码 框架 并 没有 包含 AngularJS 框架 常见 的 服务 、 指 令 与 过 滤器 文件 。 
而 道 遥 游 APP 出 于 演示 的 需要 将 使 用 服务 (Service) 与 过 滤器 (Filter) 组 件 。 因 此 需要 在 
ch-travel-app\front-end\easego ionicWwww\js 目录 下 分 别 创建 services.js 和 filters.js 文件 用 于 存放 
相应 的 组 件 代码 。 





13.3.3 ”实现 总 体 界面 导航 与 路 由 
道 遥 游 APP 的 界面 导航 与 路 由 使 用 了 Ionic 框架 推荐 的 标准 实现 方法 ， 主 要 通过 
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www\js\appjs 和 wwwtemplateswmenu html 文件 结合 来 建立 整个 结构 ， 而 www\index.html 则 提 
供 了 最 外 部 的 页 面容 器 。 这 个 实现 机 制 在 本 书 8.3.1 节 已 经 分 析 过 ， 此 处 不 再 重复 说 明 。 


【示例 13-1】 实 现 总 体 界 面 导航 与 路 由 的 代码 
www\index.html 的 总 体 界面 代码 
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【代码 解析 除了 在 本 书 13.2.2 节 提 及 的 引入 的 外 部 JS 库 和 新 增 的 服务 和 过 滤器 js 文件 ， 
笔者 将 Ionic 自动 生成 的 ng-app 命名 从 “starter” 改 为 “easego” 以 匹配 遂 遥 游 APP 的 英文 名 
称 。 文 件 中 的 ion-nav-view 指令 内 部 将 被 AngularJS UI Router 用 于 填充 
www'\templates\menu.html 的 内 容 ， 这 个 填充 操作 是 由 www\js\appjjs 应 用 模块 建立 路 由 时 设置 
的 。 


www\js\appjs 应 用 模块 建立 路 由 的 代码 片段 























目 实 成， 


遂 遥 游 APP v0.1(UGC+B2C 应 
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【代码 解析 】 代 码 中 的 根 状态 “app” 作 为 抽象 状态 将 引入 www\templates\imenu.html 文件 
的 内 容 。 文 件 中 定义 的 其 余 状 态 都 将 作为 它 的 子 状态 被 动态 切换 载 入 与 移出 (这 里 指 的 是 视觉 
上 的 效果 ，Ionic 实际 上 是 将 子 状 态 的 视图 缓存 隐藏 起 来 以 提升 性 能 ) 。 
wwwtemplateswmenu html 建立 的 应 用 总 体 侧 栏 菜单 导航 
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【代码 解析 】 代 码 的 主要 结构 与 本 书 8.3.1 节 的 示例 8-4 基本 一 致 ， 只 不 过 了 加 入 了 上 方 
显示 用 户头 像 的 代码 。 


13.3.4 ”实现 侧 栏 菜单 功能 集 


本 章 的 13.2.1 节 的 图 13.3 和 图 13.4 里 ， 分 别 有 登 录 、 注 册 两 大 功能 是 在 侧 栏 菜单 的 控制 
器 AppCtrl 直接 实现 的 。 而 注销 功能 沿用 了 Ionic 模板 的 默认 实现 位 置 ， 即 在 应 用 模块 easego 
里 实现 。 
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【示例 13-2】 实 现 侧 栏 菜单 功能 集 的 代码 片段 
www\js\appjjs 应 用 模块 里 登录 用 户 注 销 的 代码 片段 


【代码 解析 】 用 户 注销 主要 是 对 Local Storage 的 操作 ， 将 记录 当前 登录 用 户 信息 的 所 有 
属性 置 空 ， 并 同时 同步 到 $rootScope 的 对 应 属性 变量 中 去 。 判 断 用 户 是 否 登 录 以 及 后 续 访 问 服 
务 端的 API 接口 都 是 需要 访问 这 些 属性 变量 的 。 

www\js\controllersjjs 控制 器 模块 里 用 户 与 注册 的 逻辑 代码 片段 
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目 实 战 : 





遂 遥 游 APP v0.1(UGC+B2C 应 
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【代码 解析 】 除 了 前 台 页 面 的 交互 代码 〈 通 过 作用 域 变量 ) 以 外 ,逻辑 代码 里 的 其 余部 分 
均 是 调用 服务 LogonService 和 RegisterService 来 操作 后 端 服务 器 的 API。 这 里 需要 注意 的 是 因 
为 HITP API 调用 的 异步 特性 ， 调 用 服务 LogonService 和 RegisterService 基本 都 是 返回 一 个 
promise， 需 要 通过 then 函数 的 形式 注册 服务 调用 完成 后 的 回调 处 理 函 数 。 
www\js\services.js 服务 模块 里 Local Storage 操作 、 用 户 登 录 与 注册 的 代码 片段 




















目 实战 : 


遂 遥 游 APP v0.1(UGC+B2C 应 
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【代码 解析 】 对 后 端 服务 器 API 调用 的 模式 都 比较 相似 ， 都 是 通过 $http 调用 HTTP 的 标 
准 方法 (GET、POST、PUT 等 ) ， 传 送 的 数据 通过 $httpParamSerializerJQLike 进行 打包 ， 并 
加 上 相应 的 HITP 头 。 如 前 所 述 ， 调 用 $http 的 HITP 方法 将 返回 promise， 后 续 需 要 通过 then 
函数 注册 回调 函数 来 处 理 最 终 的 调用 结果 。 
wwwtemplates\logo006E.html 用 户 登 录 前 端 HIML 模板 代码 


【代码 解析 】 用 户 登录 使 用 ionicModal 组 件 的 模 态 框 实现 ， 因 此 前 端 HTML 模板 代码 的 
容器 为 ion-modal-view。 模 态 框 需 要 自行 设置 关闭 按钮 ， 如 图 13.11 的 左上 角 返 回 按钮 。 这 里 
笔者 没有 使 用 更 多 的 样式 ， 而 是 直接 使 用 了 Ionic 的 表单 文本 输入 控件 。 读 者 可 以 自行 决定 是 





第 13 章 项 目 实战 : 遂 遥 游 APP v0.1(UGC+B2C 应 用 ) 





否 需 要 进一步 美化 。 





13.11 用 户 登 录 页 
www\templates\register.html 用 户 注册 前 端 HTML 模板 代码 
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【代码 解析 】 本 页 面 的 代码 与 登录 页 面 的 代码 基本 结构 大 致 类 似 。 两 个 不 同 点 分 别 是 调用 
后 台 服务 器 API 获得 手机 验证 码 与 支持 查看 用 户 隐私 协议 , 图 13.12 中 可 以 看 到 这 两 个 被 不 同 
背景 或 字体 颜色 突出 显示 的 两 个 异形 按钮 。 查 看 用 户 隐 私 协议 也 是 由 ionicModal 组 件 的 模 态 
框 实现 ， 这 里 利用 了 它 的 可 重 入 特性 。 


注册 用 户 


同 理沙 入 并 注 册 


通 遥 游 用 疡 隐私 协议 





图 13.12 用 户 注册 页 
www'\templates\agreement.html 显示 用 户 隐 私 协议 前 端 HTML 模板 代码 
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【代码 解析 】 本 页 面 的 代码 最 为 简单 ， 页 面 的 内 容 也 是 非常 朴实 ， 如 图 13.13 所 示 。 它 直 
接 由 ionicModal 组 件 的 模 态 框 实现 。 读 者 朋友 可 以 动手 将 源 文件 进行 HTML 格式 化 ， 使 之 看 
上 去 更 美观 。 


通融 游 用 户 隐 私 协议 





图 13.13 用户 隐私 协议 浏览 页 
13.3.5 “实现 旅 友 行 踪 功能 集 
如 图 13.1 的 道 遥 游 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 已 发 布 的 游记 列表 、 单 个 游 





记 详 情 和 单个 游记 片段 3 个 功能 页 组 成 。 用户 的 浏览 步骤 也 是 按 此 顺序 进行 , 因此 本 小 节 将 依 
序 分 别 介绍 这 3 个 功能 页 的 实现 方式 。 

1 . 已 发 布 的 游记 列表 

如 图 13.5 所 示 ， 该 页 面 主要 显示 的 是 用 户 上 传 分 享 的 游记 。 由 于 游记 的 记录 数 是 随 着 时 
间 无 限 增加 的 ， 因 此 道 遥 游 APP 将 该 页 设计 成 分 页 模式 ， 初 始 时 载 入 第 一 页 。 当 用 户 浏 览 到 
页 面 的 尾 端 时 ，APP 将 自动 调用 后 台 服 务 载 入 后 续 页 码 的 记录 集 内 容 并 填充 到 页 面 。 当 用 户 
下 拉 时 ，APP 遵照 标准 的 交互 模式 ， 调 用 后 台 服 务 试图 取出 未 显示 的 最 新 记录 并 填充 到 页 面 。 











【示例 13-3】 实 现 已 发 布 的 游记 列表 功能 的 代码 片段 
www\js\controllers.js 控制 器 模块 里 已 发 布 的 游记 列表 的 逻辑 代码 片段 
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【代码 解析 】 控制 器 里 定义 的 loadMoreArticles 和 loadNew 函数 分 别 调用 后 台 同 一 方法 实 
现 了 载 入 更 多 和 刷新 获取 新 记录 功能 。 代 码 里 用 到 了 lodash 库 的 findIndex 函数 ， 它 是 用 于 返 
回 指定 对 象 在 数组 中 的 索引 ， 如 果 找 不 到 则 返回 -1。 
www\js\servicesjjs 服务 模块 里 获取 游记 的 记录 列表 代码 片段 


【代码 解析 】 该 服务 的 API 调用 比较 简单 ， 也 不 要 求 用 户 登录 信息 ， 只 要 传送 页 码 信息 
即 可 ， 默 认 情 况 下 将 传送 第 1 页 的 记录 ， 每 页 的 记录 数 由 后 端 服务 器 API 方 设 定 。 
wwwNtemplatesvarticles .html 已 发 布 的 游记 列表 前 端 HIML 模板 代码 
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【代码 解析 】 页 面 与 控制 器 配合 刷新 机 制 分 别 使 用 了 ion-refresher 和 ion-infinite-scroll 来 
调用 相应 的 更 新 记录 的 函数 .由 于 随 着 用 户 操作 , 页面 载 入 的 记录 数 可 能 会 增加 到 惊人 的 数字 ， 
因此 在 ng-repeat 指令 里 启用 了 track by 的 机 制 ， 这 样 能 优化 列表 的 更 新 性 能 。 点 击 某 个 游记 
的 封面 图 片 跳 转 到 该 游记 详情 是 通过 ui-sref 指令 来 实现 的 。 
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2 . 单个 游记 详情 
当 用 户 在 已 发 布 的 游记 列表 点 击 某 个 游记 的 封面 图 片 时 , 便 会 跳 转 到 该 游记 行情 , 并 传 入 
该 游记 的 ID 作为 参数 。 在 单个 游记 详情 将 会 显示 该 游记 所 在 的 地 理 位 置 、 游 记 的 一 些 统计 信 
息 以 及 游记 的 图 文 片段 。 
【示例 13-4】 实 现 单个 游记 详情 功能 的 代码 片段 
wwwAjsvcontrollersjs 控制 器 模块 里 单个 游记 详情 的 逻辑 代码 片段 
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【代码 解析 】 通 过 服务 $stateParams 可 以 获取 到 传 入 的 游记 ID 参数 ， 随 后 从 后 端 服务 器 
API 中 获取 到 该 游记 的 所 有 信息 。 此 外 代码 里 使 用 了 高 德 地 图 API 创建 了 地 图 对 象 map, 并 使 
用 标记 对 象 marker 在 地 图 上 标注 了 游记 的 地 理 位 置 ， 如 图 13.14 所 示 。 
www\js\servicesjs 服务 模块 里 获取 单个 游记 信息 片段 


【代码 解析 】 这 里 的 代码 目的 明确 且 实 现 简 单 ， 直 接 调 用 后 端 服 务 器 API 获得 某 个 游记 
信息 的 对 象 返 回 。 
www\templates\article.html 单个 游记 详情 查看 页 前 端 HTML 模板 代码 























目 实战 : 
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【代码 解析 】 页 面 代 码 里 的 结构 读者 应 该 基本 比较 熟悉 了 , 显示 游记 片段 的 时 候 使 用 了 两 
级 ng-repeat， 分 别 是 显示 分 组 信息 〈 即 发 生日 期 ) 和 组 内 的 游记 片段 。 唯 一 新 的 内 容 就 是 引 
入 了 id 为 map 的 div 标记 ， 用 于 在 控制 器 里 创建 地 图 对 象 。 图 13.14 中 顶部 地 图 对 象 的 高 度 ， 
可 以 通过 在 SASS 文件 /scss/ionic.app.scss 里 修改 CSS 样式 类 extemal-map 来 调整 , 读者 可 以 自 
己 动 手 实 验 一 下 。 
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图 13.14 单个 游记 详情 页 
3 . 单个 游记 片段 
当 读 者 用 户 在 单个 游记 详情 页 点 击 某 个 游记 片段 图 片 时 , 便 会 跳 转 到 该 游记 片段 的 图 文 页 
面 ， 并 传 入 该 游记 片段 的 ID 作为 参数 。 在 单个 游记 片段 将 会 显示 该 游记 所 在 的 地 理 位 置 、 游 
记 的 一 些 统计 信息 以 及 游记 的 图 文 片段 。 


【示例 13-5】 实 现 读者 用 户 查看 单个 游记 片段 图 文 功能 的 代码 片段 
www\js\controllers.js 控制 器 模块 里 用 户 查 看 单个 游记 片段 的 逻辑 代码 片段 
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【代码 解析 】 控 制 器 代码 的 主要 功能 除了 加 载 游记 片段 数据 之 外 , 同时 提供 了 给 读者 用 户 
点 赞 和 加 短评 的 函数 支持 其 中 lodash 库 的 includes 函数 用 于 判断 符合 条 件 的 记录 是 否 已 经 存 
在 于 集合 中 。 
wwwvjs\services.js 服务 模块 里 的 游记 片段 点 赞 和 加 短评 代码 片段 














第 13 章 项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 





【代码 解析 】 点 赞 和 加 短评 都 需要 登录 用 户 才 有 权限 操作 。 这 里 并 没有 限制 作者 对 自己 点 
赞 ， 读 者 可 以 考虑 自行 补充 实现 。 
www\templates\article.html 单个 游记 片段 查看 页 前 端 HTML 模板 代码 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 模 板 的 显示 效果 如 图 13.15 所 示 。 其 中 借鉴 采用 了 常见 的 头像 〈avatar) 模 
式 。 界 面 上 预 留 了 顶部 待 加 入 实现 代码 的 分 享 按钮 ， 读 者 可 以 考虑 借鉴 使 用 在 本 书 11.2.10 节 
学 习 的 $cordovaSocialSharing 插件 来 实现 这 个 功能 , 该 功能 是 不 需要 调用 后 端 服务 器 API 支持 
的 。 


O2607310125 。 MD 
工人 辟 欢 : 


1 个 评论 : 


晤 测试 用 户 1 ;测试 评注 留言 


添加 短评 ， 





图 13.15 单个 游记 片段 页 


13.3.6 ”实现 我 的 足迹 功能 集 


我 的 足迹 功能 集 的 实质 是 为 已 登录 用 户 提供 编辑 维护 和 发 布 自己 创作 的 游记 图 文 内 容 。 如 
图 13.1 的 道 遥 游 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 我 的 足迹 〈 作 者 的 游记 列表 ) 、 新 
建 游 记 、 作 者 查看 整 篇 游记 、 作 者 编辑 整 篇 游记 、 作 者 编辑 游记 片段 这 5 个 功能 页 组 成 ， 是 道 
遥 游 APP 的 UGC 特色 的 体现 。 本 小 节 将 依 序 分 别 介绍 这 5 个 功能 页 的 实现 方式 。 


1 . 作者 的 游记 列表 
该 功能 与 旅游 行踪 的 首页 展现 方式 类 似 , 只 不 过 鉴于 一 个 用 户 创作 的 游记 毕竟 有 限 , 因此 
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不 再 使 用 分 页 机 制 。 此 外 在 筛选 游记 列表 时 , 除了 只 显示 当前 登录 用 户 的 游记 记录 集 外 ,也 需 
要 将 作者 未 发 布 与 未 选择 封面 图 片 的 游记 (使 用 系统 默认 设置 的 特殊 图 片 蔡 换 为 封面 图 片 ) 都 
展示 出 来 ， 并 显著 标 出 其 状态 ， 如 图 13.16 所 示 。 



























































我 的 足迹 (游记 ) 





图 13.16 作者 的 的 游记 列表 页 


【示例 13-6】 实 现 作者 的 游记 列表 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 作者 的 游记 列表 的 逻辑 代码 片段 





.controller('MyArticlesctrl',function MyArticlesctrl( 
$scope, $rootSscope, $ionicModal, $ionicHistory, $state, $localstorage, Articleser 
vice){ 
$scope.$on('$ionicView.enter', function(e) { 
// 获 取 当 前 用 户 为 作者 的 游记 列表 
ArticleService.1istOofAuthor (SrootScope.currentUserId) 
.then (function (data) {$scope.articleList = data.data; }); 
]) 
}) 


【代码 解析 】 唯 一 的 任务 是 在 页 面 激活 时 调用 后 端 服 务 获取 当前 用 户 为 作者 的 游记 列表 。 
www\js\services.js 服务 模块 里 获取 作者 的 游记 记录 列表 代码 片段 
.factory('RrticleService' 


['$http','$httpParamSserializerJQLike','$q','appConfig', 
function ArticleService($http, $httpParamSerializerJQLike, $q,appConfig) { 





return { 
//…… 此 处 省 略 其 他 部 分 的 无 关 代 码 
listofAuthor: function (userId) { 
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【代码 解析 】 服 务 模块 的 相关 代码 也 很 简单 , 直接 用 后 端 服务 获取 当前 用 户 的 游记 列表 即 
可 。 因 为 只 是 获取 信息 ， 所 以 处 理 成 无 须 登 录 的 GET 模式 。 
www\templates\my-articles.html 作者 的 游记 记录 列表 前 端 HTML 模板 代码 





第 13 章 项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 用 ) 





【代码 解析 】 代 码 里 对 于 未 发 布 的 游记 ,通过 显示 后 端 指定 的 图 片 unpublished.png， 著 加 
在 游记 的 封面 图 片上 来 提醒 作者 .而 无 封面 图 片 的 游记 是 通过 服务 器 端的 图 片 文 件 路 径直 接 指 
定 显示 提醒 图 片 ， 这 里 无 须 处 理 。 

2 . 新 建 游记 


为 了 使 用 户 容易 上 手 , 该 功能 页 布局 设计 并 不 复杂 , 只 有 两 个 输入 元 素 , 如 图 13.17 所 示 。 
只 需要 提供 游记 名 称 和 在 地 图 上 点 击 指定 游记 发 生 的 地 理 位 置 即 可 。 


大 E02016AuoNaW -G50015 泊 全 册 一 aac 





图 13.17 作者 新 建 游记 页 


【示例 13-7】 实 现 作者 新 建 游记 功能 的 代码 片段 
www\js\controllersjs 控制 器 模块 里 作者 新 建 游记 的 逻辑 代码 片段 
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【代码 解析 本 页 面 的 地 图 增加 了 作者 的 移动 和 点 击 互动 , 因此 需要 对 地 图 的 moveend 和 click 
事件 进行 响应 。 而 调用 后 台 服务 提交 新 建 游记 的 方式 与 其 他 后 台 服 务 调用 并 无 本 质 区 别 。 
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www\js\servicesjjs 服务 模块 里 新 建 游记 代码 片段 


【代码 解析 】 后 台 服 务 模块 的 相关 代码 也 很 简单 ， 直 接 用 后 端 服 务 POST 新 建 游记 的 信息 
即 可 。 
www'\templates\article-new.html 作者 新 建 游记 前 端 HTML 模板 代码 








构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


【代码 解析 】 页 面 上 只 有 两 个 输入 控件 ， 其 中 的 地 图 控件 的 CSS 样式 类 特意 选取 了 垂直 
放大 的 模式 ,以 帮助 作者 查看 地 图 选取 地 理 位 置 。 为 了 简化 示例 代码 ,这 里 地 图 控件 并 没有 开 
启 工具 栏 和 标尺 等 其 他 高 级 选项 ， 有 兴趣 的 读者 可 以 阅读 高 德 地 图 的 文档 自行 尝试 增强 它 。 


3 . 作者 查看 整 篇 游记 


作者 在 游记 列表 点 击 自己 的 游记 封面 图 片 或 是 新 建 游记 成 功 后 ,被 设计 成 将 会 转 到 查看 整 
篇 游记 功能 页 。 图 13.18 和 图 13.19 分 别 显示 了 这 两 种 情况 下 作者 查看 整 篇 游记 功能 页 的 页 面 
显示 布局 。 最 主要 的 几 个 用 户 交互 点 分 别 是 右上 角 的 编辑 按钮 和 底部 固定 标题 栏 的 随 拍 和 图 库 
按钮 。 

用 户 点 击 编辑 按钮 将 会 进入 本 小 节 里 的 4. 作 者 编辑 整 篇 游记 功能 页 .而 随 拍 和 图 库 按钮 分 
别 代表 直接 拍照 上 传 和 从 本 地 文件 系统 (或 相 簿 ) 选择 图 片上 传 两 种 方式 建立 游记 的 图 文 片段 
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图 13.18 作者 查看 整 篇 游记 (从 游记 列表 切换 过 来 ) 图 13.19 作者 查看 整 篇 游记 (从 新 建 游记 切换 过 来 ) 


【示例 13-8】 实 现 作 者 查看 整 篇 游记 功能 的 代码 片段 
www\js\controllersjs 控制 器 模块 里 作者 查看 整 篇 游记 的 逻辑 代码 片段 
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项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 用 


【代码 解析 】 代 码 里 的 pickImage 和 takePicture 函数 分 别 完成 从 本 地 文件 系统 〈 或 相 短 ) 
选择 图 片上 传 和 直接 拍照 上 传 功能 。 前 者 的 实现 方式 是 用 HTML 5 的 文件 上 传 控件 完成 ， 而 
后 者 是 采用 通过 把 使 用 $cordovaCamera 获得 的 即时 照片 数据 经 Base64 编码 将 文件 数据 内 容 
直接 填充 在 HTTP 的 字段 里 上 传 。 

www\js\services.js 服务 模块 里 作者 查看 整 篇 游记 代码 片段 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 服 务 里 的 addArticleSectionImage 和 addArticleSectionImageBase64 函数 分 别 
对 应 本 地 文件 系统 (或 相 秒 ) 选择 图 片上 传 和 直接 拍照 上 传 功能 。 
wwwtemplatesvarticle-author html 作者 查看 整 篇 游记 前 端 HIML 模板 代码 
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【代码 解析 】 这 里 的 前 端 页 面 代码 与 前 面 13.3.5 旅游 行踪 功能 集 的 查看 页 面 代码 基本 类 
似 。 唯 一 值得 指出 的 是 选择 图 片上 传 的 图 库 按钮 ， 这 里 将 文件 输入 控件 的 onchange 事件 与 控 
制 器 的 pickImage 函数 挂 接 起 来 ， 从 而 达到 了 选择 文件 后 触发 直接 上 传 的 目的 。 

4 . 作者 编辑 整 篇 游记 

一 篇 游记 的 组 成 元 素 除 了 图 文 信息 片段 数组 之 外 , 还 有 一 些 开始 日 期 、 累 计 里 程 、 以 及 发 
布 状态 等 设置 基本 信息 , 这 就 需要 如 图 13.20 所 示 的 游记 编辑 功能 页 面 。 而 编辑 或 更 改 完成 后 ， 
作者 点 击 页 面 的 右上 角 确 定 按钮 ， 游 记 的 新 信息 需要 通过 服务 传送 到 后 端 服务 器 更 新 数据 库 。 


1 二 | 症 匡 奈 机 场 


A 人 ES 


- fp ra 
, A Se 
= dd le 
开始 日 期 
2016/07/31 


里 得 元 ( 公 早 ) 
L23455 


发布 状态 
胞 私 公开 设置 [公开 





图 13.20 作者 编辑 整 篇 游记 


【示例 13-9】 实 现 作者 编辑 整 篇 游记 功能 的 代码 片段 
www\js\controllers.js 控制 器 模块 里 作者 编辑 整 篇 游记 的 逻辑 代码 片段 
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遂 遥 游 APP v0.1(UGC+B2C 应 
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【代码 解析 】 本 页 面 的 地 图 同样 有 响应 作者 的 移动 和 点 击 互动 ， 因 此 需要 对 地 图 的 
moveend 和 click 事件 进行 响应 。 而 调用 后 台 服 务 提交 更 新 游记 信息 的 方式 与 其 他 后 台 服 务 调 
用 并 无 本 质 区 别 。 另 外 为 了 方便 完整 演示 代码 运行 , 有 些 与 新 建 游记 雷同 的 元 余 代码 未 进行 重 
构 去 重 。 

wwwjs\services.js 服务 模块 里 编辑 游记 代码 片段 





第 13 章 项目 实战 : 遂 遥 游 APP v0.1(UGC+B2C 应 用 





【代码 解析 】 后 台 服 务 模 块 的 相关 代码 也 很 简单 ， 直 接 用 后 端 服务 PUT 修改 游记 的 信息 
即 可 。 
wwwtemplatesvarticle-edit-author html 作者 编辑 整 篇 游记 前 端 HTML 模板 代码 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 前 台 页 面 模板 代码 使 用 了 Ionic 的 CSS 表单 类 和 ion-toggle 组 件 ， 这 些 部 分 
的 解析 在 前 面 的 章节 都 已 经 完整 接触 过 了 。 

5 . 作者 编辑 游记 片段 

在 本 小 节 的 作者 查看 整 篇 游记 部 分 , 当 作 者 上 传 图 片 或 直接 拍照 后 , 页 面 将 进入 切换 到 作 
者 编辑 游记 片段 功能 页 。 该 页 面 里 作者 可 以 输入 照片 说 明 ， 并 将 其 设 为 封面 图 片 ， 如 图 13.21 
所 示 。 


编辑 单 篇 游记 


造 择 日 期 ， 2016/08/16 


选择 时 间 ， 20:53:51 


设置 为 封面 图 片 








13.21 作者 编辑 游记 片段 
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【示例 13-10】 实 现 作 者 编辑 游记 片段 功能 的 代码 片段 
www\js\controllers.js 控制 器 模块 里 作者 编辑 游记 片段 的 逻辑 代码 片段 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 ] 控 制 器 与 读者 阅读 模式 相 比 增加 了 一 些 表单 字段 的 初始 化 和 调用 后 端 服务 器 
服务 提交 到 数据 库 里 。 提 交 完 成 后 将 自动 回 到 作者 查看 整 篇 游记 功能 页 。 
www\js\services.js 服务 模块 里 编辑 游记 片段 代码 片段 


【代码 解析 】 后 台 服 务 模块 的 相关 代码 也 很 简单 , 直接 用 后 端 服务 POST 方法 修改 游记 片 
段 的 基本 信息 字段 即 可 。 
www\templates\article-edit-author.html 作者 编辑 游记 片段 前 端 HIML 模板 代码 











人 











【代码 解析 】 前 端 页 面 使 用 了 Ionic 的 CSS 表单 类 和 ion-toggle 组 件 ， 这 些 部 分 的 解析 在 
前 面 的 章节 也 都 已 经 完整 接触 过 了 。 


13.3.7 ”实现 预约 旅游 产品 功能 集 


预约 旅游 产品 功能 集 的 实质 是 在 线 展示 和 获取 作者 虚拟 出 的 公司 旅游 产品 订单 。 如 图 13.1 
的 道 遥 游 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 预约 旅行 产品 首页 (产品 分 类 列表 ) 、 查 
看 某 种 类 的 旅行 产品 列表 、 产品 详情 页 、 创 建 旅行 产品 订单 、 当 前 用 户 的 订单 列表 这 5 个 功能 
页 组 成 , 是 道 遥 游 APP 的 B2C 特色 的 体现 。 本 小 节 将 依 序 分 别 介绍 这 5 个 功能 页 的 实现 方式 。 


351 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


1 . 预约 旅行 产品 首页 


如 图 13.7 所 示 ， 该 页 面 主要 显示 分 类 的 公司 旅游 产品 系列 。 由 于 产品 种 类 数 是 有 限 的 ， 
这 里 就 没有 采取 刷新 和 分 页 模式 , 直接 从 后 端 服务 器 获取 产品 列表 展示 在 页 面 即 可 。 该 功能 主 
要 的 工作 量 还 是 在 前 台 的 样式 定制 和 布局 上 ， 因 为 这 部 分 的 知识 并 不 属于 本 书 重 点 覆盖 的 内 
容 ， 因 此 读者 需要 仔细 查看 项 目 SASS 文件 /scss/ionic.app.scss 来 修改 借鉴 。 
【示例 13-11】 实 现 预 约 旅行 产品 首页 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 预约 旅行 产品 首页 的 逻辑 代码 片段 








【代码 解析 】 出 于 简化 演示 的 目的 ， 代 码 里 并 未 通过 后 端 服务 器 数据 动态 构建 产品 类 别 ， 
而 是 使 用 固定 数组 的 方式 。 不 过 容易 变化 的 产品 列表 是 从 后 端 服务 器 数据 库 取 来 的 。 整个 控制 
器 的 代码 相当 简单 ， 就 是 初始 化 产品 类 别 和 产品 列表 。 此 外 代码 里 用 到 了 lodash 库 的 filter 函 
数 ， 它 是 用 来 筛选 返回 对 象 集合 中 只 符合 指定 条 件 的 对 象 子 记录 和 集 。 
www\js\services.js 服务 模块 里 从 后 端 获 取 产 品 列表 代码 片段 








目 实战 : 遂 遥 游 APP v0.1(UGC+B2C 应 





【代码 解析 】 这 里 的 服务 代码 使 用 了 GET 方式 从 后 端 直接 获取 产品 列表 。 
www\templates\products.html 预约 旅行 产品 首页 前 端 HTML 模板 代码 
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【代码 解析 】 该 页 面 对 前 台 的 组 件 风格 进行 了 定制 ， 如 顶部 标题 栏 的 半 透 明 风格 ， 用 
ion-scroll 组 件 完 成 的 横向 产品 图 片 列 表 。 此 外 因为 有 些 界面 元 素 不 会 在 其 他 页 面 上 出 现 而 有 
共享 样式 的 可 能 ， 因 此 将 CSS 风格 直接 写 在 了 页 面 的 HTML 文件 里 。 


2 . 查看 某 种 类 的 旅行 产品 列表 
在 预约 旅行 产品 首页 点 击 产品 种 类 大 图 后 ,将 会 显示 该 种 类 的 产品 列表 页 ， 如 图 13.22 所 


经 此 产品 0 - 经 典 产 品 0 的 介绍 
Pt: 2016-08-02 


经 典 产 品 1 - 经 典 产 品 1 的 介绍 





图 13.22 ”指定 种 类 的 旅行 产品 列表 页 
【示例 13-12】 实 现 查看 某 种 类 的 旅行 产品 列表 功能 的 代码 片段 
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www\js\controllersjjs 控制 器 模块 里 查看 某 种 类 的 旅行 产品 列表 的 逻辑 代码 片段 





【代码 解析 】 该 控制 器 代码 非常 简单 ,调用 后 台 服 务 获取 指定 种 类 的 产品 列表 并 填充 到 作 


用 域 变量 内 即 可 。 
wwwtemplates\products-category.html 查看 某 种 类 的 旅行 产品 列表 前 端 HTML 模板 代码 





【代码 解析 】 视 图 的 代码 也 非常 简单 ， 显 示 产 品 的 封面 图 片 和 价格 等 产品 信息 即 可 。 不 满 
足 界面 效果 的 读者 可 以 考虑 在 前 后 台 进 行 代码 修改 ,使 一 个 产品 能 以 轮 播 组 件 的 方式 显示 更 多 
的 图 片 和 信息 。 


3 . 产品 详情 页 
用 户 在 预约 旅游 产品 首页 或 查看 某 种 类 的 旅行 产品 列表 页 点 击 某 个 产品 的 图 片 时 ,会 进入 
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到 产品 详情 页 ， 这 也 是 购买 行为 的 引导 页 。 如 图 13.23 所 示 ， 除 了 显示 产品 的 各 类 信息 之 外 ， 
底部 固定 标题 栏 男 有 电话 咨询 和 立即 预订 两 个 按钮 .用 户 点 击 后 将 分 别 调用 手机 的 电话 短 功 能 
拨打 预 设 的 咨询 号 码 或 进入 到 本 小 节 的 创建 旅行 产品 订单 页 。 


有 效 时 间 2016-08-02 
¥88858 
简介 
经 典 产 品 ! 的 介绍 经 典 产品 1 的 介绍 , 经典 产品 1 的 放 绍 她 典 
产品 1 的 介绍 -- 
产品 详情 全 


和 经典 产品 1 的 详细 介绍 ,经 典 产品 1 的 详细 介绍 , 经 热 产品 1 的 详 
甸 介 绍 经 曲 产品 1 的 详细 介绍 ,经 曲 产品 1 的 详细 介绍 . 经 生产 
品 1 的 详细 介绍 经 典 产品 :的 详细 介绍 , 经 典 产品 1 的 详细 介 
组 , 经典 产品 1 的 译 细 介绍 ,经典 产品 1 的 详细 介绍 … 


价格 信息 要 
注意 事项 要 





图 13.23 ”指定 的 产品 详情 页 


【示例 13-13】 实 现 查看 指定 的 产品 详情 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 查看 指定 的 产品 详情 的 逻辑 代码 片段 





【代码 解析 】 该 控制 器 代码 非常 简单 , 调用 后 台 服 务 筛选 出 指定 的 产品 详情 对 象 并 填充 到 
作用 域 变量 内 即 可 。 
wwwi\templates\products.html 查看 指定 的 产品 详情 前 端 HTML 模板 代码 


356 























目 实战 : 遂 遥 游 APP v0.1(UGC+B2C 应 
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【代码 解析 】 视 图 的 代码 有 一 个 比较 不 常见 的 地 方 是 利用 了 <a> 标 签 的 超 链接 属性 可 以 是 
电话 号 码 的 特性 。 此 外 页 面 里 出 于 演示 的 目的 , 将 测试 数据 字段 重复 显示 了 多 次 ,以 示例 字段 
收 起 和 摊 开 图 标的 使 用 。 

4 . 创建 旅行 产品 订单 

为 了 提高 转化 率 ,需要 用 户 填写 的 订单 界面 应 做 到 简洁 明了 ,不 能 有 过 于 复杂 的 页 面 结构 。 
因此 创建 旅行 产品 订单 功能 界面 使 用 了 最 简单 的 HTML 表单 来 实现 ， 用 户 填写 完 最 基本 的 信 
息 后 提交 即 可 ,如 图 13.24 所 示 。 这 里 设计 的 商业 逻辑 是 有 客服 或 者 商务 人 员 在 线 监控 后 台 的 
订单 情况 , 获取 到 用 户 提 交 的 订单 后 在 内 部 业务 系统 做 相应 的 跟 单 处 理 , 本 书 对 这 部 分 就 不 再 
奖 述 了 。 





价格 () 
第 用 日 期 


中 文 姓名 
联系 手机 





13.24 创建 旅行 产品 订单 界面 
【示例 13-14】 实 现 创建 旅行 产品 订单 功能 的 代码 片段 


358 


”第 13 章 项 目 实 战 ， 道 遥 游 APP v0.1(UGC+B2C 应 用 





www\js\controllersjjs 控制 器 模块 里 创建 旅行 产品 订单 的 逻辑 代码 片段 


【代码 解析 】 该 控制 器 代码 分 为 两 部 分 : 调用 后 台 服务 筛选 出 指定 的 产品 详情 并 填充 到 作 
用 域 变量 和 向 后 台 提交 订单 。 提 交 成 功 后 使 用 根 作用 域 变 量 的 showToast 函数 调用 了 
ngCordova 的 $cordovaToast 插件 提示 用 户 订单 提交 的 情况 。 

www\js\servicesjjs 服务 模块 里 创建 旅行 产品 订单 代码 片段 
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【代码 解析 】 这 里 的 服务 代码 使 用 了 POST 方式 向 后 端 提交 订单 信息 , 是 使 用 的 最 基本 的 
提交 方式 。 
www\templates\po-create.html 创建 旅行 产品 订单 前 端 HTML 模板 代码 





第 13 章 项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 用 ) 





【代码 解析 】 创 建 旅行 产品 订单 功能 界面 使 用 了 最 简单 的 HTML 表单 来 实现 。 
5 . 当前 用 户 的 订单 列表 
出 于 简化 操作 的 考虑 ， 道 遥 游 APP 的 用 户 订单 一 旦 提交 ， 则 用 户 只 能 查看 ， 而 不 能 再 更 
改 退 订 ， 毕竟 产品 购买 的 确认 和 支付 行为 设计 成 需要 人 工 干 预 ， 而 不 是 在 APP 里 直接 完成 的 。 
因此 道 遥 游 APP 的 当前 用 户 的 订单 列表 页 面 非常 简单 ， 就 是 通过 列表 列举 出 用 户 的 所 有 订单 
信息 ， 如 图 13.25 所 示 。 由 于 单个 用 户 的 订单 数据 量 有 限 ， 因 此 并 无 分 页 机 制 。 


经 典 产品 2 - 经 典 产品 2 的 介绍 
使 用 时 间 : 2016-08-17 
价格 : 83.a88 


圳 县: 1 
总 价 : 88.888 


家 庭 产品 2- 家 庭 产品 2 的 介绍 
使 用 时 间 : 2016-08-10 
价格 : 千 B8.858 


次 量 : 





13.25 ”当前 用 户 的 订单 列表 
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【示例 13-15】 实 现 显示 当前 用 户 的 订单 列表 功能 的 代码 片段 
wwwyjsvcontrollersjs 控制 器 模块 里 显示 当前 用 户 的 订单 列表 的 逻辑 代码 片段 


【代码 解析 】 该 控制 器 代码 与 显示 产品 列表 的 控制 器 代码 是 非常 相似 的 , 即 调用 后 台 服 务 
获取 数据 对 象 列 表 并 填充 到 作用 域 变量 内 即 可 。 
www\js\servicesjjs 服务 模块 里 显示 当前 用 户 的 订单 列表 代码 片段 


【代码 解析 】 这 里 的 服务 代码 使 用 了 POST 方式 从 后 端 直接 获取 用 户 的 所 有 订单 列表 。 
www\templates\po-list.html 显示 当前 用 户 的 订单 列表 前 端 HIML 模板 代码 





第 13 章 项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 用 ) 








【代码 解析 】 显 示 当 前 用 户 的 订单 列表 前 端 功 能 界面 因为 没有 过 多 的 用 户 操作 交互 设计 ， 
因此 非常 简单 。 


13.3.8 实现 设置 功能 集 


设置 功能 集 相对 于 其 他 部 分 相当 简单 ， 子 功能 基本 都 以 模 态 框 的 方式 实现 。 如 图 13.1 的 
遂 遥 游 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 设置 导航 页 、 更 改 账户 设置 和 修改 密码 这 3 
个 子 功能 页 组 成 。 如 图 13.8 所 示 ， 设 置 导航 页 与 大 多 数 APP 应 用 的 设置 功能 布局 类 似 ， 它 直 
接 提供 用 户头 像 的 上 传 功 能 ， 并 有 个 人 资料 的 编辑 更 新 与 密码 的 维护 的 功能 入 口 。 

【示例 13-16】 实 现 设置 功能 的 代码 片段 

www\js\controllersjjs 控制 器 模块 里 实现 设置 功能 的 逻辑 代码 片段 
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人 





【代码 解析 】 控 制 器 的 代码 主要 分 为 了 更 改 用 户头 像 、 更 改 账户 设置 和 修改 密码 这 3 个 部 
分 。 其 中 更 改 用 户头 像 的 实现 是 使 用 HTML 的 文件 上 传 控件 完成 。 而 更 改 账户 设置 和 修改 密 
码 都 是 使 用 $ionicModal 载 入 模 态 框 完成 。 
www\js\servicesjs 服务 模块 里 设置 功能 代码 片段 
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目 实战 : 遂 遥 游 APP v0.1(UGC+B2C 应 








【代码 解析 最 务 的 代码 也 是 分 为 了 更 改 用 户头 像 、 更 改 账户 设置 和 修改 密码 这 3 个 部 分 。 
唯一 值得 注意 的 是 更 改 用 户头 像 是 自行 使 用 了 S$q 服务 来 包装 生成 promise, 因为 文件 上 传 并 不 
在 $http 服务 的 覆盖 范围 里 。 


wwwtemplates\setting.html 设置 功能 页 前 端 HTML 模板 代码 
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【代码 解析 】 除 了 更 改 用 户头 像 的 代码 部 分 ,其余 的 页 面 代码 都 是 标准 的 实现 。 更 改 头 像 
用 的 还 是 HTML 的 文件 上 传 控件 与 AngularJS 的 结合 ， 这 个 做 法 在 13.3.6 节 已 经 接触 和 解释 


过 也 
wwwtemplates\account-setting.html 更 改 当前 用 户 的 账户 设置 前 端 HTML 模板 代码 





”第 13 章 ， 项 目 实战 : 道 遥 游 APP v0.1(UGC+B2C 应 用 ) 








【代码 解析 】 更 改 当前 用 户 的 账户 设置 使 用 的 是 标准 的 HTML 表单 结合 AngularJS 的 指 
令 ， 如 图 13.26 所 示 。 代 码 里 用 到 的 做 法 都 应 该 是 相当 熟悉 的 了 。 

















13.26 更改 当前 用 户 的 账户 设置 
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www\templates\change-password.html 用 户 修改 密码 前 端 HTML 模板 代码 





【代码 解析 】 用 户 修改 密码 功能 页 使 用 的 也 是 标准 的 HTML 表单 结合 AngularJS 的 指令 ， 
读者 可 以 考虑 在 这 基础 上 加 入 找 回 密码 等 更 用 户 友好 的 实现 方式 ， 如 图 13.27 所 示 。 





输入 原 密码 


输入 新 密码 (6 位 ) 


再 输入 一 次 (6 位 ) 





13.27 用 户 修改 密码 功能 
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13.3.9 定制 启动 屏 与 APP 图 标 


代码 的 编写 到 13.3.8 节 基 本 就 结束 了 ， 然 而 每 个 APP 应 用 都 应 该 有 符合 自身 配色 和 应 用 
风格 的 图 标 和 启动 屏 ， 因 此 本 小 节 将 介绍 如 何 快速 生成 替换 Ionic 自 带 的 默认 图 标 和 启动 屏 文 
件 。 

在 项 目的 resources 目录 下 ，Ionic 为 Android 和 iOS 平台 自动 复制 了 默认 的 图 标 和 启动 屏 
文件 ， 如 图 13.28 所 示 ， 因 此 最 方便 的 做 法 就 是 使 用 应 用 的 图 片 来 替换 它们 。 











图 13.28 Ionic 默认 的 图 标 和 启动 屏 文件 


尽管 Ionic CLI 提供 了 通过 命令 生成 图 标 和 启动 屏 文件 的 集成 方式 ， 然 而 由 于 国内 网 络 的 
状况 ， 该 命令 运行 基本 是 失败 的 。 笔 者 推荐 还 是 自己 使 用 Photoshop 等 图 片 编辑 工具 自行 生成 
这 些 文件 并 覆盖 它们 。 图 13.29 和 13.30 分 别 演示 了 遂 遥 游 APP 在 Anroid 平台 的 图 标 和 启动 
屏 文件 缩 略图 集 。 





drawable-hdpi-i drawable-ldpi-i drawable-mdpi drawable-xhdpi drawable-xxhd 。 drawable-xoothd 
con.png conpng -icon.png -icon.png pi-iconpng pi-icon.png 





图 13.29 遂 遥 游 APP 在 Anroid 平台 的 图 标 


drawable-port- drawable-port- 
mdpi-screen.pn 。 xhdpiscreenpn 
9 9 








图 13.30 遂 遥 游 APP 在 Anroid 平台 的 启动 屏 


]〗3 引 ,A 小结 与 作业 练习 


本 章 介绍 的 实战 项 目 道 遥 游 APP 是 一 个 笔者 花费 了 1 周 左右 业余 时 间 完 成 的 APP (包括 
前 后 端 以 及 图 片 收集 与 二 次 处 理工 作 ) 。 虽 然 界面 与 功能 尚 显 朴素 , 但 是 已 经 把 一 个 面向 大 众 
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的 APP 应 用 基本 结构 搭建 起 来 可 以 给 种 子 用 户 使 用 或 是 作为 概念 产品 找 投资 者 了 ， 剩 下 的 工 
作 就 是 让 APP 在 用 户 反馈 和 自身 改进 中 不 断 迭 代 成 长 。 而 如 果 只 使 用 两 个 平台 的 原生 技术 来 
开发 同样 的 功能 ， 相 信 所 耗费 的 时 间 和 精力 将 会 远 超出 笔者 投入 的 资源 ， 这 也 反映 了 Ionic 的 
长 处 所 在 。 

对 于 使 用 本 书 学 习 Ionic 开发 的 读者 朋友 ， 为 了 让 自己 更 快 地 掌握 这 项 技术 ， 笔 者 推荐 您 
在 阅读 现 有 APP 代码 的 基础 上 ， 可 以 考虑 对 它 做 如 下 功能 补充 来 作为 作业 练习 : 
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完成 游记 的 分 享 功 能 

增加 作者 在 编辑 游记 片段 时 选择 地 址 功能 

完成 游记 片段 的 修改 删除 功能 

当 作者 的 游记 被 读者 点 赞 或 是 评论 时 , 使 用 极光 推送 向 其 发 送 通知 ,实现 方式 可 参考 
网 上 的 官方 组 件 (https://github.comyjpush/jmessage-phonegap-plugin ) 。 

使 用 本 书 11.2.12 节 介 绍 的 $cordovaSQLite 插件 对 游记 列表 进行 缓存 管理 ， 这 样 将 能 
有 效 降低 APP 对 手机 的 流量 消耗 ， 并 能 在 你 在 演示 APP 时 减少 对 后 端 服务 数据 API 
的 依赖 并 加 快 页 面 载 入 速度 。 


14 章 


项 目 实战 : 销售 掌中 宝 v0.1 
(企业 应 用 ) 


有 了 第 13 章 的 Ionic 项 目 技术 基础 ， 本 章 将 再 介绍 另 一 类 主要 以 表单 和 报表 为 基础 的 企 
业 应 用 类 APP 的 设计 开发 过 程 。 本 章 将 描述 如 何 为 一 个 虚拟 企业 的 销售 部 门 建立 名 为 销售 掌 
中 宝 的 覆盖 最 基本 的 CRM 功能 的 APP。 

本 章 的 主要 知识 点 包括 : 


@ 在 导航 框架 内 同时 使 用 侧 栏 菜单 与 选项 卡 栏 。 

在 页 面 里 调用 自行 定制 开发 的 AngularJS 指令 ( Directive ) 。 

在 Ionic 里 使 用 百度 ECharts 和 angular-echarts 组 件 提供 报表 功能 。 
如 何 提供 设置 使 用 户 能 自 定义 报表 的 显示 顺序 和 是 否 显示 某 报 表 。 
在 标题 栏 上 的 搜索 框 实现 。 





本 章 标题 中 的 v0.1 代表 着 完成 的 APP 产品 是 在 一 周 内 快速 迭代 完成 的 初始 产品 。 该 APP 
主要 定位 于 教学 需要 ,后 续 的 性 能 界面 优化 、 功 能 丰富 增强 和 严密 的 权限 控制 可 由 读者 作 
| 为 学 习 本 章 后 的 强化 作业 练习 自行 完成 。 








项 目 和 代码 说 明 


随 着 移动 网 络 的 发 展 , 企业 用 户 也 已 经 开始 接受 手机 作为 主力 的 生产 工具 了 。 对 于 经 常 需 
要 在 外 面 奔波 的 销售 代表 和 销售 经 理 来 说 ,能 让 绝 大 部 分 的 工作 在 手机 上 而 不 是 办 公 室 的 电脑 
上 完成 ， 将 能 提高 他 (她 ) 们 的 生产 效率 ， 把 资源 和 精力 投入 到 最 该 投入 到 的 地 方 ， 而 不 是 坐 
在 公司 办 公 室 里 从 事 低 价值 的 活动 。 

为 了 适应 这 个 需求 ， i en sr me et 客户 、 
访 、 订 单 这 4 部 分 核心 业务 数据 。 此 外 APP 里 还 提供 集成 的 报表 功能 是 企业 的 内 部 业 
务 系统 常见 的 需求 。 
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14.1.1 项 目 说 明 


在 参考 借鉴 了 其 他 同类 APP 的 界面 和 考虑 到 Ionic 提供 的 两 种 应 用 模板 类 型 的 特点 之 后 ， 
笔者 决定 结合 Ionic 的 sidemenu 模板 与 选项 卡 组 件 来 开始 销售 掌中 宝 APP 的 整体 界面 布局 设 
计 。 

在 本 书 第 13 章 已 经 演示 过 使 用 高 德 地 图 API 如 何在 Ionic 框架 里 进行 地 图 功能 的 集成 ， 
因此 本 项 目 为 了 不 过 多 重复 读者 已 经 掌握 的 内 容 , 决定 不 再 引入 高 德 地 图 组 件 来 实现 常见 的 对 
销售 人 员 的 客户 拜访 行为 进行 地 图 跟踪 功能 。 读 者 如 有 实际 需要 可 以 参考 本 书 第 13 章 的 相关 
内 容 自行 实现 。 

在 手机 里 实现 用 户 可 触摸 交互 的 报表 是 注重 数据 分 析 的 商务 型 APP 经 常会 遇 到 的 需求 ， 
因此 本 项 目 依 据 国 内 开源 报表 组 件 使 用 的 现状 与 背后 的 开发 团队 实力 和 后 续 的 支持 力度 , 决定 
使 用 百度 ECharts (http://echarts.baidu.com/) 来 提供 移动 端 设备 的 报表 。 

本 书 第 13 章 已 经 演示 过 如 何在 Ionic 项 目 里 对 默认 提供 的 配色 和 布局 方案 进行 改造 和 扩 
充 ， 使 界面 更 加 活泼 和 具有 现代 感 。 本 项 目 也 不 再 重复 这 个 部 分 ， 而 直接 使 用 Ionic 的 默认 配 
色 与 CSS 样式 。 

此 外 ， 对 于 企业 内 部 事务 的 申请 和 审批 、 业务 数据 的 查看 与 更 改 权限 等 实际 功能 ， 读 者 在 
掌握 了 Ionic 框架 的 开发 基础 知识 后 不 难 从 项 目 实战 中 借鉴 做 法 来 实现 。 笔 者 将 这 些 尚 需 完善 
和 个 性 化 的 部 分 留 给 读者 作为 自行 练习 内 容 , 因为 只 有 自己 动手 做 和 思考 才能 完全 内 化 与 掌握 
一 门 技 术 。 


14.1.2 ” 随 书 代码 运行 说 明 
读者 可 以 先 在 电脑 上 运行 测试 已 完成 的 整个 项 目 再 进入 阅读 后 续 的 设计 和 实现 内 容 ,需要 
执行 以 下 步骤， 
@ 复制 随 书 源 代 码 的 整个 ch-sales-app 目录 到 本 机 的 任意 文件 下， 如 
“ci\temp\ch-sales-app”。 
@ “启动 MongoDB， 执 行 步骤 参考 本 书 12.1 节 。 
@ ”启动 Node 执行 文件 “安装 目录 \ch-sales-app\back-endvsalesruby-express\index.js”， 执 
行 步骤 参考 本 书 12.3 节 。 
@ ”编辑 文件 “安装 目录 \ch-sales-app\front-end\salesruby_ionicWwww\js\services.js”， 将 如 
下 第 3 行 代码 中 的 192.168.1.80 改 为 本 机 的 他 地 址 : 
"rootUrl": 'http://192.168.1.80:3000'，// 需 要 将 IP 改 为 后 端 服 务 器 的 地 址 
@ 在 “安装 目录 \ch-sales-app\front-end\ salesruby ionic\” 目 录 下 执行 Ionic CLI 命令 : 
ionic serve 
@ 随后 在 浏览 器 自动 加 载 的 应 用 界面 里 就 可 以 使 用 测试 账户 〈 用 户 名 : ml; 密码 : 
111111) 来 测试 了 。 
@ ”测试 完毕 需要 终止 NodeJS 进程 。 
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14.2 功能 设计 


根据 14.1 节 的 项 目 说 明 ， 销 售 掌中 宝 APP 主要 由 6 部 分 的 功能 集 组 成 ， 分 别 是 
@ 基础 功能 

@ 商机 

@ 和 拜访 

@ 客户 

@ 订单 

@ 报表 

这 6 个 功能 集 与 其 内 部 的 主要 子 功能 可 参考 图 14.1 所 示 的 销售 掌中 宝 APP 整体 功能 结构 


图 。 


登录 /退出 商机 列表 

i 设置 基础 功能 增加 商机 

A 修改 商机 

7 日 内 日 常 工作 执行 概要 
人 员 业 绩 (销售 额 与 回 款额) 
销售 辞 访 概要 (本 月 ) 









客户 列表 
-| 报表 : 
[全 









客户 概要 
i 增加 联系 人 
让 修改 联系 人 
增加 拜访 (计划 ) 

拜访 开始 操作 S 订单 列表 

罗 > | 增加 订单 

[ 苦 访 | 修改 订单 

增加 回 款 








图 14.1 销售 掌中 宝 APP 整体 功能 结构 图 


14.2.1 界面 与 业务 功能 概述 


1 . 侧 栏 菜单 

销售 掌中 宝 APP 通过 侧 栏 菜 单 为 用 户 提供 在 不 同 主要 功能 动态 跳 转 的 方式 ， 同 时 菜单 也 
会 根据 用 户 的 登录 状态 而 动态 调整 显示 的 可 选 菜 单项 的 内 容 。 图 14.2 和 图 14.3 分 别 演示 了 用 
户 在 登录 和 未 登录 状态 下 菜单 的 显示 情况 。 
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销售 学 中 全 
退出 (销售 经 理 ) 
日 膏 工 作 
内 部 事务 (读者 实现 ) 


报表 设置 





图 14.2 ”用户 已 登录 状态 下 的 侧 栏 菜单 区 域 显示 图 14.3 用户 未 登录 状态 下 的 侧 栏 菜单 区 域 显示 

2 . 商机 

商机 也 被 称 为 销售 线索 , 是 销售 人 员 通 过 敏锐 的 市 场 触觉 发 掘 的 潜在 的 商业 机 会 。 一 般 来 
说 ， 商 机 不 要 求 关 联 已 有 的 客户 ， 但 必须 有 销售 人 员 负 责 跟踪 。 图 14.4 显示 了 商机 样 例 对 象 
的 一 些 重要 属性 在 列表 视图 中 显示 。 对 商机 尤其 是 重点 商机 的 状态 进行 持续 地 跟踪 和 督导 是 销 
售 管理 人 员 日 常 的 工作 任务 之 一 。 


3 . 拜访 


除了 政策 或 技术 市 场 垄断 型 的 企业 外 , 大 部 分 的 销售 代表 和 销售 管理 人 员 都 需要 不 断 地 进 
行 客户 拜访 。 而 拜访 的 目的 多 种 多 样 ， 有 初步 接触 、 跟 进 联系 、 上 门 拜访 、 发 送 资料 、 寄 送 样 
品 、 意 向 报价 、 签 订 合 同 、 感 情 联系 等 等 。 因 此 在 APP 应 用 中 能 够 提前 计划 拜访 和 在 完成 时 
记录 收获 是 销售 人 员 对 系统 的 基本 要 求 。 如 图 14.5 所 示 ， 销 售 掌中 宝 APP 提供 了 拜访 计划 和 
拜访 完成 时 的 记录 功能 。 具 体 的 功能 实现 将 在 14.3.6 节 详 述 。 


= 商机 拜访 2016-08-10 


备注 口 选 择 日 期 ~ 


初步 接触 -销售 代表 2 周 = 辕 三 辕 四 


估计 价值 人 人民 FF) 
预计 成 交 日 期 : 204 


备注 


失败 关闭 -销售 代表 2 


和 拜访 : 12:00 ZZZ 有 限 公司 





拜访 : ol00 ABC 有 限 公司 





商务 谈判 -销售 经 理 1 


区 
区 
区 
到 


~v 
拜访 : 12:00 YYY 有 限 公司 ©O 
© 
~ 
BE 








时 各 EE se 党 至 
图 14.4 商机 列表 页 图 14.5 ”拜访 列表 页 
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4 . 客户 

客户 是 产生 收入 和 利润 的 终极 来 源 , 很 多 企业 不 愿 把 CRM 或 销售 系统 云端 化 就 是 出 于 对 
客户 信息 资源 保护 的 顾虑 。 销 售 掌中 宝 APP 提供 了 最 基础 的 客户 信息 与 客户 联系 人 信息 维护 
功能 ， 同 时 在 图 14.6 的 客户 列表 示例 界面 里 还 实现 了 对 客户 单位 名 和 客户 联系 人 姓名 的 搜索 
功能 。 

5 . 订单 

根据 中 国 商业 社会 的 情况 , 大 部 分 销售 人 员 的 终极 目的 就 是 出 单 和 完成 收 款 。 销售 掌中 宝 
APP 提供 了 基础 的 销售 订单 维护 和 订单 回 款 跟踪 的 功能 ， 如 图 14.7 所 示 。 至 此 ， 普 通 销售 代 
表 的 日 常 工作 任务 就 基本 覆盖 到 了 。 











订 和 金额 昕 扣 后 : 3,000,000 
已 必 信 阁 :11000875 

蔡 收 金额 : 1899,912.5 
电话 12345678 备注 


职务 采购 经 理 2016/08/11 - 章 向 层 音 [ei 


已 万- 销售 代 直 1 Fe 


联系 人 : 王 起 性 别 : 2 
电话 12345678 
职务 ; 行政 经 理 





长 期 意向 -销售 代表 1 
轩 型 卫 
Bl 


图 14.6 客户 列表 页 图 14.7 订单 列表 页 


6 . 报表 

大 部 分 的 销售 管理 人 员 除 了 自身 背负 了 销售 任务 以 外 ， 同 时 也 要 负责 管理 销售 团队 的 表 
现 ， 而 及 时 准确 的 报表 将 能 帮助 他 们 便利 有 效 地 管理 。 另 一 方面 ， 每 个 管理 者 的 管理 思路 和 重 
点 又 是 不 一 样 的 。 销 售 掌中 宝 APP 提供 了 可 配置 的 销售 报表 分 析 模 块 ， 因 此 销售 管理 者 除了 
能 使 用 图 14.8 和 图 14.9 显示 的 默认 报表 页 以 外 ， 也 可 以 使 用 图 14.10 演示 的 配置 报表 页 调整 
报表 的 顺序 和 是 否 显 示 。 相信 读者 看 到 这 里 就 能 联想 到 , 这 里 的 配置 和 动态 布局 显示 机 制 配合 
起 来 ， 当 企业 因为 自身 需要 对 销售 掌中 宝 APP 的 默认 报表 模块 进行 了 扩充 增加 时 ， 也 可 以 反 
映 到 销售 管理 者 的 配置 报表 页 中 去 ， 从 而 达到 一 定 程度 个 性 化 配置 的 效果 。 
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拜 六 :0 前 客户 1 新 商机 :0 
收 才 全 新: 1.3030875 。 订单 名: 


客户 发 展 活动 趋势 


1 

on 

08- 

04 

02- 

oa 0 on4 0805 m5 ou 
© Dr- Yerit -OF 


配置 报表 页 


日 常 工作 执行 


Wren -O- Sr DO 
收入 创造 活动 趋势 


< 
© 
© 人 au 
© 
© 


Wu oN ol on ons 
OO- FT -0- Mir 


人 员 业 绩 对 比 
全 由 项 








图 14.8 报表 页 图 14.9 报表 页 ( 续 ) 图 14.10 配置 报表 页 
7 . 基础 功能 


一 般 的 APP 都 会 提供 除 登 录 退 出 外 的 用 户 资料 更 改 和 个 性 设置 等 基础 功能 。 这 部 分 内 容 
在 第 13 章 的 13.3.9 节 已 经 有 过 实现 和 解析 , 因此 在 销售 掌中 宝 APP 中 就 不 再 重复 实现 类 似 无 
新 意 的 内 容 , 仅 出 于 完整 性 来 提供 用 户 的 登录 和 注销 功能 。 有 兴趣 的 读者 可 以 考虑 自行 扩充 这 








部 分 的 功能 集 内 容 。 
销售 掌中 宝 APP 并 未 提供 对 产品 业务 对 象 的 维护 功能 ， 是 考虑 到 大 部 分 的 企业 对 产品 
信息 的 维护 基本 都 是 通过 内 部 ERP 或 产品 研发 系统 来 完成 。 因 此 APP 中 只 有 读 取 产 
品 列表 的 基本 功能 ， 在 业务 实践 中 后 端 服务 可 以 有 与 企业 内 部 系统 自动 同步 最 新 产品 
信息 的 机 制 。 








14.2.2 ”服务 端 API 接口 概述 


14.2.1 节 介绍 的 都 是 前 台 展 现 出 的 功能 ， 然 而 展现 的 内 容 是 存储 在 后 台 服 务 端 数据 库 无 
论 是 传统 的 SQL 或 是 目前 流行 的 NoSQL ) 并 通过 访问 接口 来 获取 到 前 端 设备 上 的 。 
针对 销售 掌中 宝 APP 的 主要 业务 对 象 ， 其 服务 端 API 主要 提供 了 6 类 数据 实体 与 数据 报 
表 功 能 的 访问 接口 : 
@@ 用户， 接口 文件 路 径 为 : back-end/salesruby-express/api/vl/users.js 
产品 ， 接 口 文件 路 径 为 : back-end/salesruby-express/api/vl/productsjs 
商机 ， 接 口 文件 路 径 为 : back-end/salesruby-express/api/vl/opportunitiesjs 
和 拜访， 接口 文件 路 径 为 : back-end/salesruby-express/api/v1/visits.js 
客户 ， 接 口 文件 路 径 为 : back-end/salesruby-express /api/vl/clients.js 
订单 ， 接 口 文件 路 径 为 : back-end/salesruby-express/api/vl/posjs 
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@ ” 报表， 接口 文件 路 径 为 : back-end/salesruby-express/api/vl/reports.js 


由 于 服务 端 API 的 编写 不 属于 本 书 详细 介绍 的 内 容 范 围 。 限 于 篇 幅 的 关系 , 服务 端的 API 
代码 本 书 不 会 单独 介绍 , 感 兴趣 的 读者 可 以 自行 阅读 代码 与 其 中 相应 的 注释 。 但 是 对 相关 服务 
端 API 的 调用 将 会 在 各 功能 的 服务 实现 小 节 中 提 及 以 保证 内 容 逻 辑 的 完整 性 。 


1 4 .了 功能 实现 


通过 14.1 和 14.2 节 的 介绍 ， 想 必 读 者 已 经 对 应 用 的 大 致 功能 有 了 初步 了 解 。 从 本 节 开 始 
笔者 将 介绍 销售 掌中 宝 APP 的 测试 运行 和 功能 代码 实现 解析 ， 读 者 可 以 在 本 节 通 过 实际 运行 
与 结合 代码 阅读 改写 来 进一步 熟悉 使 用 Ionic 开发 应 用 的 整个 过 程 。 


14.3.1 准备 工作 : 部 署 服务 器 端 环境 


与 第 13 章 类 似 , 在 进入 编写 前 端 APP 代码 之 前 ， 首 先 需要 保证 服务 端 API 的 可 用 ,因此 
第 一 步 是 完成 服务 器 端 环境 的 部 署 与 测试 验证 其 正常 工作 。 

1 . 复制 服务 器 端 目录 并 运行 npm 包 安 装 命令 

将 随 书 代码 里 路 径 “ch-sales-app\back-end\” 下 的 salesruby-express 目录 复制 到 本 机 上 ， 并 
调整 uploads 和 avatars 两 个 目录 的 权限 ， 去 掉 只 读 属 性 。 

随后 在 salesruby-express 目录 下 的 命令 行 运行 : 


这 样 将 会 安装 该 后 端 NodeJS 项 目 依赖 的 npm 包 。 
2 . 启动 mongodb 
如 果 尚 未 启动 MongoDB 的 后 台 服 务 进程 ， 则 在 命令 行 运行 命令 启动 : 


3 . 启动 salesruby-express 目录 下 的 index.js 文件 
在 命令 行内 进入 salesruby-express 目录 ， 随 后 运行 命令 启动 : 


4 . 使 用 mongo 查询 salesruby 数据 库 是 否 已 被 初始 化 


步骤 3 成 功 执行 后 将 会 连接 并 初始 化 salesruby 数据 库 ， 因 此 这 里 需要 通过 mongo 查询 该 
数据 库 是 否 已 成 功 建立 , 输出 的 内 容 应 如 图 14.11 所 示 ，salesruby 数据 库 会 出 现在 数据 库 列表 
中 。 
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图 14.11 使 用 mongo 查询 salesruby 数据 库 是 否 已 被 初始 化 
5 . 使 用 postman 测试 接口 
最 后 一 步 就 是 使 用 postman 验证 测试 服务 端的 API 接口 是 否 能 正常 提供 数据 了 。 在 
postman 使 用 POST 方法 调用 http://localhost:3000/api/v1/products/list 来 测试 是 否 能 获取 到 笔者 
已 经 在 代码 里 自动 载 入 的 测试 数据 记录 集 。 正 常情 况 下 应 该 如 图 14.12 所 示 ， 有 多 个 用 于 测试 
的 产品 记录 返回 。 











er [一 | 屋 

















图 14.12 ”使 用 postman 测试 服务 端的 API 接 口 是 否 已 经 可 用 
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14.3.2 ”初始 化 项 目 设置 与 目录 结构 
1 . 使 用 Ionic CLI 初始 化 项 目 目录 


在 14.1 节 的 项 目 说 明 里 决定 了 使 用 Ionic 的 sidemenu 模板 作为 APP 的 开发 起 点 ， 因 此 可 
以 用 如 下 命令 来 初始 化 应 用 : 


ionic start -a "销售 掌中 宝 " -s --template sidemenu salesruby ionic 








如 果 读 者 从 头 构建 一 个 Ionic 的 APP 推荐 用 ionic CLI 来 初始 化 项 目 ， 而 如 果 读 者 只 是 通 
过 源码 的 复制 查看 销售 掌中 宝 APP 应 用 目前 的 整体 代码 结构 并 修改 完善 ， 则 无 须 运行 上 
面 的 初始 化 命令 。 


一 一 








2 . 为 项 目 安装 配置 SASS 支持 
随后 可 以 在 目录 运行 以 下 命令 使 项 目 切换 成 使 用 SASS 来 编写 CSS 文件 : 
ionic setup sass 


注意 : 由 于 命令 的 运行 会 在 其 内 部 调用 npm install， 在 国内 的 网 络 环境 下 有 可 能 会 出 错 退 
出 。 读 者 可 参考 Ionic 官方 网 站 的 说 明文 档 http://ionicframework.com/docs/cli/sass.html 来 自行 
手工 安装 项 目 对 SASS 的 支持 。 


3 . 复制 引入 第 三 方 JS 库 


销售 掌中 宝 APP 将 使 用 本 书 4.2 节 介 绍 的 lodash 库 ， 从 服务 后 端 获 取 到 数据 集合 的 处 理 
支持 ， 因 此 需 将 笔者 使 用 的 lodash 库 文 件 lodash-4.13.1.js 复制 至 
ch-sales-app\front-end\salesruby_ionicWwww\distyjs 目录 下 。 

虽然 在 14.1 节 里 已 经 说 明 本 APP 不 直接 调用 高 德 地 图 API 服务 , 为 了 方便 读者 未 来 的 扩 
充 修改 ， 还 是 将 其 在 线 API 服务 引入 到 ch-sales-app\front-end\salesruby_ionicvwww 目录 下 的 
index.html 文件 中 。 

在 拜访 的 功能 界面 里 ，APP 参考 使 用 了 一 个 支持 Ionic 的 开源 日 历 显示 组 件 

(https:/Wgithub.comy/twinssbc/Ionic-Calendar) 。 因 此 需要 将 其 发 布 版 的 样式 文件 calendar.css 复 
制 到 ch-sales-app\front-end\salesruby ionicvwwwvdistvcss 目录 下 , 而 把 JS 文件 calendar-tplsjs 和 
angular-locale_zh-cn.js 复制 到 ch-sales-app\front-end\salesruby _ionicvwwwvdistyjs 目录 下 。 

APP 也 使 用 了 外 部 时 间 计 算 辅 助 库 moment (http:/momentjs.com/) 进行 日 期 时 间 转 换 和 
多 种 区 间 判 断 计 算 ， 因此 需要 将 其 发 布 版 的 JS 文件 momentminjs 复制 到 
ch-sales-app\front-end\salesruby_ionic\www\distyjs 目录 下 。 

最 后 是 APP 报表 功能 所 使 用 的 ECharts 库 ， 需 要 将 其 发 布 版 的 JS 文件 echartsjs 复制 到 
ch-sales-app\front-end\salesruby_ionicWwww\distyjs 目录 下 。 根据 其 官网 的 说 明 , 需要 将 被 用 到 的 
3 个 报表 样式 定义 JS 文件 romajs 、vintagejs 和 infographicjs 都 复制 到 目录 
ch-sales-app\front-end\salesruby_ionicWwww\distyjs\theme 下 。 由 于 直接 使 用 官方 的 ECharts 库 需 
要 在 页 面 或 控制 器 代码 里 操作 DOM 对 象 ， 这 并 不 符合 AngularJS 的 开发 规范 。 因 此 根据 其 
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Github 网 站 上 的 推荐 ， 找 到 了 使 用 率 较 高 的 angularecharts 组 件 
(https://github.com/wangshijun/angular-echarts ) 来 给 项 目 使 用 。 这 就 需要 将 angular-echartsjs 

也 复制 到 ch-sales-app\front-end\salesruby_ionicWwww\distjs 目录 下 。 

4 . 设置 对 Android 平台 的 支持 

由 于 Windows 环境 下 的 工具 集 比较 全 面 易 得 ,笔者 主要 选择 在 Windows 下 进行 销售 掌中 
宝 APP 的 开发 测试 ， 测 试 机 也 是 Android 系统 的 手机 。 在 测试 需要 一 些 手机 硬件 配合 才能 完 
成 的 功能 时 ， 需 要 把 应 用 测试 包 安装 在 实体 机 上 。 因 此 需要 参照 本 书 2.2.2 节 的 做 法 为 销售 掌 
中 宝 APP 添加 Anroid 平台 支持 ， 有 具体 的 步骤 不 再 重复 说 明 。 

5 . 创建 AngularJS 的 服务 ( Service ) 与 自 定义 指令 ( Directive ) 定义 JS 文件 

Ionic 默认 生成 的 代码 框架 并 没有 包含 AngularJS 框架 常见 的 服务 与 指令 文件 。 而 销售 掌 
中 宝 APP 出 于 演示 的 需要 将 使 用 服务 (Service) 与 自 定义 指令 (Directive) 组 件 。 因 此 需要 
在 ch-sales-app\front-endvsalesruby_ionicvwwwAjs 目录 下 分 别 创建 services.js 和 directives.js 文件 
用 于 存放 相应 的 组 件 代 码 。 


14.3.3 ”完成 总 体 界 面 导航 与 路 由 


销售 掌中 宝 APP 的 界面 导航 与 路 由 使 用 了 Ionic 框架 推荐 的 标准 实现 方法 ， 主 要 通过 
www\js\appjjs 和 wwwtemplateswmenu html 文件 结合 来 建立 整个 结构 ， 而 www\index.html 则 提 
t 了 最 外 部 的 页 面容 器 。 这 个 实现 机 制 在 本 书 8.3.1 节 已 经 分 析 过 ， 此 处 不 再 重复 说 明 。 


【示例 14-1】 实 现 总 体 界面 导航 与 路 由 的 代码 
www\index.html 的 总 体 界面 代码 
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【代码 解析 】 除 了 在 本 书 14.2.2 节 提 及 的 引入 的 外 部 JS 库 和 新 增 的 服务 和 命令 js 文件 ， 
笔者 将 Ionic 自动 生成 的 ng-app 命名 从 “starter” 改 为 “salesruby” 以 匹配 销售 掌中 宝 APP 的 
英文 名 称 。 文 件 中 的 ion-nav-view 指令 内 部 将 被 AngularJS UI Router 用 于 填充 
www\templates\menu.html 的 内 容 ， 这 个 填充 操作 是 由 www\js\appjjs 应 用 模块 建立 路 由 时 设置 
的 。 


wwwvjs\appjjs 应 用 模块 建立 路 由 的 代码 片段 
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【代码 解析 】 粗 看 下 来 本 文件 的 代码 与 本 书 13.3.3 节 同 名 文件 的 代码 类 似 , 但 是 销售 掌中 
宝 APP 还 同时 启用 了 选项 卡 导航 ， 因 此 底层 状态 最 深 会 达到 3 级 ， 即 根 一 侧 栏 菜单 项 一 选项 
卡 项 。 代 码 中 的 根 状态 “app” 作 为 虚拟 状态 将 引入 wwwtemplateswmenu.html 文件 的 内 容 ， 而 
“app.dailyjobs” 状 态 同样 是 虚拟 状态 ， 它 将 引入 www\templates\dailyjob-tabs.html 文件 的 内 容 
从 而 建立 选项 卡 栏 。 文件 中 定义 的 其 余 状态 都 将 作为 它 的 子 状态 被 动态 切换 载 入 与 移出 (这 里 
指 的 是 视觉 上 的 效果 ，Ionic 实际 上 是 将 子 状态 的 视图 缓存 隐藏 起 来 以 提升 性 能 ) 。 
www\templates\menu.html 建立 的 应 用 总 体 侧 栏 菜单 导航 
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【代码 解析 】 代 码 的 主要 结构 与 本 书 8.3.1 节 介绍 分 析 过 的 示例 8-4 基本 一 致 。 


14.3.4 ”实现 侧 栏 菜单 与 登录 /退出 功能 


本 章 的 14.2.1 节 的 图 14.2 和 图 14.3 里 ， 分 别 有 用 户 登录 和 退出 两 大 功能 是 在 侧 栏 菜单 的 
控制 器 AppCtrl 直接 实现 的 。 
【示例 14-2】 实 现 侧 栏 菜 单 功能 集 的 代码 片段 集 
www\js\controllersjjs 控制 器 模块 里 用 户 登录 和 退出 的 逻辑 代码 片段 
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【代码 解析 】 用 户 登 录 和 退出 的 代码 是 委托 给 服务 来 完成 ， 这 样 更 符合 AngularJS 官方 的 
推荐 ， 即 把 业务 逻辑 尽量 放 在 服务 里 ， 使 控制 器 尽 可 能 的 轻 量 。 
wwwjs\services.js 服务 模块 里 用 户 登 录 和 退出 的 代码 片段 
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【代码 解析 】 除 了 前 台 页 面 的 交互 代码 (通过 作用 域 变量 ) 以 外 ,逻辑 代码 里 的 其 余部 分 
均 是 调用 服务 LogonService 来 操作 后 端 服务 器 的 API。 这 里 需要 注意 的 是 因为 HTTP API 调用 
的 异步 特性 , 调用 服务 LogonService 是 返回 一 个 promise， 需要 通过 then 函数 的 形式 注册 服务 
调用 完成 后 的 回调 处 理 函数 (这 里 是 两 个 函数 ， 分 别 对 应 成 功 和 失败 的 结果 处 理 ) 。 对 后 端 服 
务 器 API 调用 的 模式 是 通过 $http 调用 HTTP 的 标准 方法 (GET、POST、PUT 等 ) ， 传 送 的 数 


据 通过 $httpParamSerializerJQLike 进行 打包 ， 并 加 上 相应 的 HTTP 头 。 如 前 所 述 ， 调 用 $http 
的 HTTP 方法 将 返回 promise， 后 续 需 要 通过 then 函数 注册 回调 函数 来 处 理 最 终 的 调用 结果 。 
wwwtemplates\logon .html 用 户 登 录 前 端 HIML 模板 代码 
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【代码 解析 】 与 第 13 章 的 实现 方式 完全 一 致 ， 用 户 登 录 使 用 ionicModal 组 件 的 模 态 框 实 
现 , 因此 前 端 HTML 模板 代码 的 容器 为 ion-modal-view。 模 态 框 需要 自行 设置 关闭 按钮 ， 如 图 
14.13 的 左上 角 返 回 按钮 。 这 里 笔者 没有 使 用 更 多 的 样式 ， 而 是 直接 使 用 了 Ionic 的 表单 文本 
输入 控件 。 读 者 可 以 自行 决定 是 否 需要 进一步 美化 。 





< 登录 





14.13 用户 登录 页 


14.3.5 ”实现 商机 业务 功能 集 


如 图 14.1 的 销售 掌中 宝 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 商机 列表 、 增 加 商机 、 
修改 商机 这 3 个 功能 页 组 成 。 本 小 节 将 依 序 分 别 介绍 这 3 个 功能 页 的 实现 方式 。 
1 . 商机 列表 


如 图 14.4 所 示 ， 该 页 面 主要 显示 的 是 商机 列表 。 出 于 简化 示例 代码 的 目的 ， 笔 者 在 实现 
时 并 未 采用 分 页 机 制 。 读 者 朋友 可 以 参考 本 书 13.3.5 节 的 分 页 机 制 来 补充 这 个 特性 。 


【示例 14-3】 实 现 商机 业务 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 商机 列表 的 逻辑 代码 片段 
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【代码 解析 】 控 制 器 里 定义 的 reloadOpportunities 函数 为 调用 后 台 方 法 实现 了 载 入 最 新 的 
商机 列表 功能 。 而 tryAddOpportunity 和 tryUpdateOpportunity 函数 是 为 了 在 页 面 上 调用 增加 和 
修改 商机 功能 而 实现 的 。 值 得 注意 的 是 reloadOpportunities 函数 也 作为 参数 传 给 这 两 个 函数 ， 
因为 当 它 们 成 功 新 增 或 改变 商机 时 ， 商 机 列表 页 需要 进行 更 新 以 反映 最 新 的 状态 。 此 外 
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tryUpdateOpportunity 函数 里 对 后 端 服 务 器 传送 来 的 日 期 变量 通过 moment 库 进 行 了 变形 , 以 使 
前 台 控 件 能 识别 。 代 码 里 使 用 的 lodash 库 的 extend 函数 是 用 于 将 后 续 参 数 对 象 的 属性 复制 到 
第 一 个 参数 对 象 上 ; 而 sortBy 函数 是 用 来 对 对 象 数组 排序 的 。 

wwwAjs\services.js 服务 模块 里 获取 商机 的 记录 列表 代码 片段 


【代码 解析 】 服 务 模块 的 相关 代码 也 很 简单 , 直接 用 后 端 服务 获取 商机 列表 即 可 。 因 为 是 
有 保密 需要 的 企业 内 部 应 用 ， 所 以 处 理 成 需要 登录 的 POST 模式 。 
www\templates\tab-opportunities.html 商机 列表 前 端 HIML 模板 代码 
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【代码 解析 】 代 码 里 除了 显示 商机 列表 以 外 , 也 分 别 通过 两 个 图 标 按钮 提供 了 增加 商机 和 
修改 商机 的 入 口 。 

2 . 增加 商机 

为 了 尽 可 能 多 地 获取 商机 相关 的 信息 , 商机 的 输入 界面 有 较 多 的 表单 输入 字段 ,如 图 14.14 
所 示 。 





图 14.14 增加 商机 页 


为 了 方便 演示 表单 的 所 有 内 容 ， 截 取 图 14.14 时 笔者 使 用 了 Chrome 浏览 器 的 响应 式 布局 





模式 ,而 不 是 像 往 常 一 样 选取 让 hone5S 或 Phone6 的 模拟 布局 。 


【示例 14-4】 实 现 增 加 商机 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 增加 商机 的 逻辑 代码 片段 
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【代码 解析 】 增 加 商机 功能 委托 给 BaseService 服务 来 完成 ， 好 处 是 把 业务 逻辑 尽量 放 在 
服务 里 ， 使 控制 器 尽 可 能 的 轻 量 。 此 外 如 果 后 续 扩展 其 他 业务 功能 如 拜访 、 客 户 、 订 单 部 分 里 
使 其 可 以 增加 商机 时 ， 就 都 可 以 通过 调用 BaseService 服务 来 完成 了 。 

wwwAjs\services.js 服务 模块 里 增加 商机 代码 片段 
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【代码 解析 】 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 OpportunityService。 前 者 用 
于 处 理 界面 与 业务 逻辑 ， 如 载 入 页 面 模 板 文件 ， 提 供 商 机 对 象 相关 的 销售 人 员 、 产 品 、 客 户 关 
联 关系 。 而 后 者 的 职责 是 处 理 与 后 端 服务 器 API 的 交互 ， 比 较 简单 。 此 外 代码 里 用 到 了 lodash 
库 的 cloneDeep 函数 ， 它 是 用 于 深度 复制 生成 一 个 对 象 的 完全 克隆 。 
www\templates\add-opportunity.html 增加 商机 前 端 HIML 模板 代码 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





























【代码 解析 】 页 面 上 有 较 多 的 输入 控件 ,其 中 的 销售 人 员 、 客 户 和 产品 选择 最 终 都 会 调用 


399 








构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 
BaseService 来 再 次 载 入 模 态 框 供用 户 选取 业务 对 象 。 其 余部 分 代码 虽然 很 长 ， 但 都 是 基本 的 
AngularJS 和 HTML 控件 的 用 法 ， 这 里 不 再 资 述 。 

3 . 修改 商机 


商机 信息 是 需要 根据 市 场 和 客户 的 情况 不 断 清晰 完善 的 , 因此 更 新 修改 商机 的 功能 必 不 可 
少 ， 如 图 14.15 所 示 。 








图 14.15 ”修改 商机 页 


【示例 14-5】 实 现 修改 商机 功能 的 代码 片段 
www\js\services.js 服务 模块 里 修改 商机 代码 片段 
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【代码 解析 】 与 增加 商机 的 代码 极其 类 似 ， 代 码 也 分 为 BaseService 和 OpportunityService 
两 个 服务 。 前 者 用 于 处 理 界面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 ,提供 商机 对 象 相关 的 销售 人 
员 、 产 品 、 客 户 关联 关系 。 而 后 者 的 职责 是 处 理 与 后 端 服务 器 API 的 交互 。 

www\templates\edit-opportunity.html 修改 商机 前 端 HTML 模板 代码 
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【代码 解析 】 页 面部 分 代码 虽然 很 长 , 但 与 增加 商机 的 页 面 代码 极其 类 似 , 这 里 不 再 资 述 。 


14.3.6 ”实现 拜访 业务 功能 集 


如 图 14.1 的 销售 掌中 宝 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 拜访 列表 、 增 加 拜访 、 
修改 拜访 计划 和 完成 拜访 任务 这 4 个 功能 页 组 成 。 本 小 节 将 依 序 分 别 介绍 这 4 个 功能 页 的 实现 
方式 。 


从 代码 实现 逻辑 上 来 说 ,完成 拜访 任务 的 功能 是 属于 修改 拜访 计划 的 一 部 分 ， 该 功能 也 使 | 
用 了 修改 拜访 计划 的 后 台 服 务 接口 。 但 是 从 业务 角度 来 看 把 完成 拜访 任务 单独 抽出 来 作为 
一 个 功能 页 对 于 用 户 更 容易 理解 。 因 此 细心 的 用 户 会 发 现 完成 拜访 任务 所 在 的 位 置 与 图 
14.1 的 显示 并 不 能 完全 对 应 。 





1 . 拜访 列表 
如 图 14.5 所 示 ， 该 页 面 主要 显示 的 是 基于 日 历 的 拜访 列表 。 点 击 日 历 组 件 标题 栏 右 方 的 
小 三 角形 将 能 切换 是 否 显示 日 历 。 


【示例 14-6】 实 现 拜 访 业 务 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 拜访 列表 的 逻辑 代码 片段 
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【代码 解析 】 控 制 器 里 定义 的 loadCalendarData 函数 为 调用 后 台 方 法 实现 了 载 入 最 新 的 拜 
访 列表 并 筛选 显示 指定 日 期 的 所 有 拜访 安排 的 功能 。 而 tryAddVisit 和 tryEditVisit 函数 是 为 了 
在 页 面 上 调用 增加 和 修改 拜访 功能 而 实现 的 。 此 外 声明 的 作用 域 里 calendar 变量 是 用 于 页 面 上 
的 日 历 对 象 的 设置 目的 。 另 外 代码 里 的 两 处 gscope.$watch() 函 数 调用 是 用 于 监控 作用 域 变 量 的 
变化 。 由 于 对 拜访 的 修改 和 增加 都 可 能 导致 页 面 里 拜访 列表 显示 的 变化 , 而 修改 与 增加 操作 都 
是 在 后 面 打 开 的 修改 或 增加 模 态 框 逻辑 代码 内 完成 ,默认 情况 下 是 不 会 更 新 到 拜访 列表 页 面 上 
的 。 此 外 代码 里 用 到 了 lodash 库 的 some 函数 ， 它 被 用 来 判断 对 象 集合 中 是 否 已 有 指定 对 象 。 

www\js\services.js 服务 模块 里 获取 拜访 的 记录 列表 代码 片段 
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【代码 解析 】 服 务 模块 的 相关 代码 很 简单 ， 直 接 用 后 端 服务 获取 拜访 列表 即 可 。 
www\templates\tab-visits.html 拜访 列表 前 端 HTML 模板 代码 


【代码 解析 】 代 码 中 最 独特 的 就 是 <calendar> 指 令 的 使 用 。 正 如 14.3.2 节 说 明 的 ， 这 个 组 
件 是 用 于 提供 给 用 户 触 碰 交 互 而 显示 指定 日 期 拜访 安排 列表 。 该 指令 的 所 有 可 用 参数 说 明 读者 
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可 以 参考 14.3.2 节 提供 的 Ionic-Calendar 组 件 的 Github 网 址 。 
2 . 增加 拜访 


作为 日 常 的 销售 活动 ， 单 次 拜访 计划 的 输入 并 没有 涉及 过 多 的 表单 输入 字段 ， 如 图 14.16 
所 示 。 


堪 加 至 访 计划 
客户 : 


销售 人 只: 


计划 胖 访 日期， 

2015/08/19 

守 基 关 认 时 间 : 

ong 

类 别 |， ERR "| 
备注 ， 





14.16 ”增加 拜访 页 


【示例 14-7】 实 现 增加 拜访 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 增加 拜访 的 逻辑 代码 片段 





【代码 解析 】 增 加 拜访 功能 委托 给 BaseService 服务 来 完成 ， 好 处 是 把 业务 逻辑 尽量 放 在 
服务 里 ,使 控制 器 尽 可 能 的 轻 量 。 此 外 如 果 后 续 扩 展 其 他 业务 功能 如 商机 、 客 户 、 订 单 部 分 里 
使 其 可 以 增加 拜访 时 ， 就 都 可 以 通过 调用 BaseService 服务 来 完成 了 。 

www\js\services.js 服务 模块 里 增加 拜访 代码 片段 
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【代码 解析 】 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 VisitService。 前 者 用 于 处 理 
界面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 ， 并 提供 拜访 对 象 相关 的 销售 人 员 、 客 户 关 联 关系 设置 
功能 。 而 后 者 的 职责 是 处 理 与 后 端 服 务 器 API 的 交互 ， 比 较 简 单 。 

www\templates\add-visit.html 增加 拜访 前 端 HIML 模板 代码 
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【代码 解析 】 页 面 代码 与 增加 商机 的 页 面 基本 结构 非常 类 似 , 只 是 输入 控件 更 少 、 更 简单 。 
3 . 修改 拜访 计划 
拜访 计划 可 以 根据 实际 情况 变化 修改 调整 ， 如 图 14.17 所 示 。 


客户 ， 
YYY 有 限 公司 





销售 人 员 : 
销售 弛 理 1 


计划 亩 访 B 期 ， 
2016/08/25 

计划 许 访 时 间 ， 

12:00 

拜访 类 别 ，。 | 符 iTE 同 "| 
备注 ， 


双 万 已 经 达成 价格 和 其 他 条 球 的 一 致 ， 需 要 洲 请 
双方 高 层 签约 。| 





14.17 ”修改 拜访 页 


【示例 14-8】 实 现 修改 拜访 计划 的 代码 片段 
www\js\services.js 服务 模块 里 修改 拜访 计划 代码 片段 
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〖 第 14 章 ”项目 实 成 :销售 掌中 宝 v0.1 (企业 应 用 








【代码 解析 】 与 修改 商机 的 代码 极其 类 似 , 代码 也 分 为 BaseService 和 VisitService 两 个 服 
务 。 前 者 用 于 处 理 界面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 ， 提 供 拜 访 对 象 相关 的 销售 人 员 、 客 
户 关联 关系 。 而 后 者 的 职责 是 处 理 与 后 端 服务 器 API 的 交互 。 
www\templates\edit-visit.html 修改 拜访 计划 前 端 HTML 模板 代码 
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【代码 解析 】 页 面部 分 代码 虽然 很 长 ， 但 与 增加 拜访 的 页 面 代码 结构 基本 相同 ， 唯 一 的 区 
别 在 于 出 于 业务 要 求 是 不 容许 随意 重新 选择 客户 的 。 


4 . 完成 拜访 


拜访 计划 是 需要 销售 人 员 主 动 进行 完成 操作 来 关闭 和 填写 的 , 并 同时 提供 拜访 过 程 里 增加 
商机 、 客 户 联系 人 、 订 单 、 下 次 拜访 计划 的 入 口 ， 如 图 14.18 所 示 。 


完成 拜访 计划 ~ 


客户 : 

有 限 公司 

拜访 类 别 。 。 | 签订 合同 " 
实际 拜访 日 期 : 

2016/08/19 


拜访 结束 时 间 ， 


11:33 


备注 ， 
过 程 比 较 顺利 ， 签 约 气氛 很 融 治 ， 可 以 进入 后 续 
的 首付 款 跟踪 步骤 了 。| 





图 14.18 “完成 拜访 页 


【示例 14-9】 实 现 完成 拜访 计划 任务 的 代码 片段 
wwwjs\services.js 服务 模块 里 完成 拜访 计划 任务 代码 片段 
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【代码 解析 】 与 修改 拜访 计划 的 代码 极其 类 似 ， 甚 至 代码 最 终 也 是 调用 VisitService 服务 























的 updateVisit 函数 向 后 端 服务 器 提交 数据 。 
www\templates\finish-visit.html 完成 拜访 计划 前 端 HTML 模板 代码 
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【代码 解析 】 页 面部 分 代码 与 修改 拜访 计划 的 页 面 代码 结构 基本 相同 , 唯一 的 区 别 在 于 界 
面 上 提供 拜访 过 程 里 增加 商机 、 客 户 联系 人 、 订 单 、 下 次 拜访 计划 的 入 口 。 其 中 增加 下 次 拜访 
计划 的 实现 笔者 已 经 给 出 来 了 ， 其 余 3 个 部 分 的 实现 留 给 读者 作为 练习 完成 。 


14.3.7 ”实现 客户 业务 功能 集 

如 图 14.1 的 销售 掌中 宝 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 客户 列表 、 增 加 客户 、 
修改 客户 、 增 加 联系 人 、 修 改 联系 人 这 5 个 功能 页 组 成 。 本 小 节 将 介绍 这 5 个 功能 页 的 实现 方 
法 。 

1 . 客户 列表 

如 图 14.6 所 示 ， 该 页 面 主要 显示 的 是 客户 列表 。 由 于 一 般 企业 客户 的 数量 并 不 会 很 多 ， 
此 外 出 于 简化 示例 代码 的 目的 , 笔者 在 实现 时 并 未 采用 分 页 机 制 。 不 过 为 了 方便 销售 人 员 快 速 
查找 定位 客户 或 联系 人 , 在 列表 页 面 的 顶部 提供 了 搜索 栏 以 通过 用 户 输入 来 筛选 客户 列表 , 如 
图 14.19 所 示 。 


联系 人 : 王 起 
电话 : 12345678 
职务 :行政 经 理 


卡其 意 向 销售 代表 三 四 





14.19 ”客户 列表 页 的 搜索 栏 
【示例 14-10】 实 现 客户 列表 业务 功能 的 代码 片段 
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wwwyjsvcontrollers js 控制 器 模块 里 客户 列表 的 逻辑 代码 片段 


中 宝 v0.1 (企业 应 用 
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【代码 解析 】 控 制 器 里 定义 的 reloadClients 函数 为 调用 后 台 方 法 实现 了 载 入 最 新 的 客户 列 
表 并 按 客户 名 排序 显示 。 而 tryAddClient 和 tryUpdateClient 函数 是 为 了 在 页 面 上 调用 增加 和 修 
改 客户 功能 而 实现 的 。 此 外 filterName 函数 提供 了 根据 搜索 栏 的 内 容 筛选 符合 条 件 (客户 名 和 
联系 人 姓名 ) 的 搜索 功能 , 主要 思路 是 用 lodash 库 的 filter 和 findIndex 函数 结合 更 新 符合 条 件 
的 记录 列表 。 
www\js\services.js 服务 模块 里 获取 客户 列表 代码 片段 






































ET 








【代码 解析 】 服 务 模块 的 相关 代码 很 简单 ， 直 接 用 后 端 服务 获取 客户 列表 即 可 。 
wwwtemplatesvtab-clients.html 客户 列表 前 端 HTML 模板 代码 





与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 代 码 里 除了 显示 客户 列表 以 外 , 也 分 别 通过 图 标 按钮 提供 了 增加 与 修改 客户 
和 联系 人 的 入 口 。 此 外 对 于 未 添加 联系 人 的 客户 项 ， 会 显示 尚 无 联系 人 信息 的 提示 信息 。 

2 . 增加 与 修改 客户 

由 于 增加 与 修改 客户 信息 的 界面 与 功能 基本 一 致 ， 如 图 14.20 所 示 ， 因 此 这 里 把 两 个 子 功 
能 的 实现 合并 在 一 起 介绍 。 





当前 状态 ， 
类 别 


备注 ， 
尚未 发 展 成 潜在 客户 ， 还 需 努 力 folow。 | 





14.20 ”增加 与 修改 客户 功能 页 
【示例 14-11】 实 现 增加 与 修改 客户 功能 的 代码 片段 


www\js\controllersjs 控制 器 模块 里 增加 客户 的 逻辑 代码 片段 
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【代码 解析 】 增 加 客户 功能 委托 给 BaseService 服务 来 完成 ， 好 处 是 把 业务 逻辑 尽量 放 在 
服务 里 ， 使 控制 器 尽 可 能 的 轻 量 。 
www\js\services.js 服务 模块 里 增加 与 修改 客户 代码 片段 
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【代码 解析 】 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 ClientService。 前 者 用 于 处 
理 界面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 ， 并 提供 客户 对 象 相关 的 销售 人 员 设 置 功能 。 而 后 者 
的 职责 是 处 理 与 后 端 服 务 器 API 的 交互 ， 比 较 简 单一 致 。 
www\templates\add-client.html 增加 客户 前 端 HTML 模板 代码 
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【代码 解析 】 页 面 代码 与 增加 商机 的 页 面 基本 结构 非常 类 似 ， 只 是 输入 控件 相对 更 少 、 更 
简单 。 


3 . 增加 与 修改 联系 人 


由 于 增加 与 修改 客户 方 联系 人 信息 的 界面 与 功能 基本 一 致 ， 如 图 14.21 所 示 ， 因 此 这 里 把 
两 个 子 功能 的 实现 合并 在 一 起 介绍 。 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


境 加 联系 人 











图 14.21 增加 与 修改 客户 方 联系 人 功能 页 


【示例 14-12】 实 现 增加 与 修改 客户 方 联系 人 信息 的 代码 片段 
www\js\services.js 服务 模块 里 增加 与 修改 客户 方 联系 人 代码 片段 
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第 14 章 中 宝 v0.1 (企业 应 用 





【代码 解析 】 类 似 其 他 业务 功能 的 做 法 ， 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 
ClientService。 前 者 用 于 处 理 界面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 。 而 后 者 的 职责 是 处 理 与 
后 端 服 务 器 API 的 交互 ， 比 较 简单 一 致 。 

wwwtemplatesvadd-contact html 增加 客户 联系 人 前 端 HTML 模板 代码 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 页 面 代码 与 增加 商机 的 页 面 基本 结构 非常 类 似 ， 只 是 输入 控件 相对 更 少 、 更 
简单 。 


14.3.8 ”实现 订单 业务 功能 集 


如 图 14.1 的 销售 掌中 宝 APP 整体 功能 结构 图 所 示 ， 本 部 分 主要 由 订单 列表 、 增 加 订单 、 
修改 订单 、 增 加 回 款 这 4 个 功能 页 组 成 。 本 小 节 将 介绍 这 4 个 功能 页 的 实现 方式 。 


1 . 订单 列表 
如 图 14.7 所 示 ， 该 页 面 主要 显示 的 是 每 个 销售 订单 以 及 回 款 统计 的 信息 。 


让 昌 141 + 只 是 条 单 排列 了 所 有 的 销售 订单 ， 这 在 现实 中 随 着 业务 的 积 林 是 不 符合 要 求 的 。 


出 于 节省 篇 幅 和 不 反复 实现 同类 特性 代码 的 考虑 ,笔者 没有 实现 分 页 和 查找 机 制 , 读者 朋 
友 利用 本 书 第 13 章 学 到 的 做 法 来 练习 重 构 改造 它 。 





【示例 14-13】 实 现 订 单列 表 业 务 功能 的 代码 片段 
wwwvjs\controllersjjs 控制 器 模块 里 订单 列表 的 逻辑 代码 片段 
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【代码 解析 】 控 制 器 里 定义 的 reloadPos 函数 为 调用 后 台 方 法 实现 了 载 入 最 新 的 订单 列表 
并 按 创建 时 间 排 序 显 示 。 而 tryAddPo、tryUpdatePo 和 tryAddMoneyReceive 函数 是 为 了 在 页 面 
上 调用 增加 修改 订单 和 增加 收 款 功能 而 实现 的 。 此 外 sumPoItems 和 sumReceived 函数 完成 了 
动态 统计 订单 总 金额 和 收 坎 总 金额 ， 而 不 是 由 服务 器 端 完成 。 这 么 做 是 考虑 到 NodeJS 的 服务 
端 不 擅长 做 太 多 的 计算 工作 ， 因 此 选择 由 客户 端 承受 一 些 计 算 资源 的 消耗 。 代 码 里 用 到 了 
lodash 库 的 sum 函数 ， 它 是 用 来 对 集合 进行 合计 累加 的 。 
wwwAjs\services.js 服务 模块 里 获取 订单 列表 代码 片段 





【代码 解析 】 服 务 模块 的 相关 代码 很 简单 ， 直 接 用 后 端 服务 获取 订单 列表 即 可 。 如 果 读 者 
考虑 优化 数据 加 载 ， 则 需要 在 前 后 端 同 时 加 入 页 码 参数 和 对 应 的 动态 更 新 逻辑 。 


2 . 增加 与 修改 订单 


项 目 实战 : 销售 掌中 宝 v0.1 (企业 应 用 ) 





由 于 增加 与 修改 订单 信息 的 界面 与 功能 基本 一 致 如 图 14.22 所 示 ， 因 此 这 里 把 两 个 子 功 
能 的 实现 合并 在 一 起 介绍 。 


更 新 订单 信息 





数量 ; 3000 单价 6666 
总 价 ; 19,998,000 


折扣 后 总 金额 ， 
3000000 


收 货 人 姓名 ， 


收 货 人 联系 方式 ， 


收 货 地 点 ， 


期 社交 货 日 期， 


年 /月 上 日 


期 竺 收 款 日 期 ， 
年 /月 上 日 





14.22 ”增加 与 修改 订单 功能 页 


【示例 14-14】 实 现 增加 与 修改 订单 业务 功能 的 代码 片段 
www\js\controllersjjs 控制 器 模块 里 增加 订单 的 逻辑 代码 片段 





【代码 解析 】 增 加 客户 功能 委托 给 BaseService 服务 来 完成 ， 好 处 是 把 业务 逻辑 尽量 放 在 
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服务 里 ， 使 控制 器 尽 可 能 的 轻 量 。 
www\js\services.js 服务 模块 里 增加 与 修改 订单 代码 片段 
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构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 





【代码 解析 】 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 PoService。 前 者 用 于 处 理 界 
面 与 业务 逻辑 ， 如 载 入 页 面 模板 文件 ， 并 提供 订单 对 象 相关 的 销售 人 员 、 客 户 设置 功能 。 而 后 
者 的 职责 是 处 理 与 后 端 服务 器 API 的 交互 , 比较 简单 一 致 此 外 addPoItem 方法 用 于 为 订单 对 
象 动态 增加 订单 行 项 目 ， 这 是 该 部 分 稍 有 特色 的 地 方 。 
wwwtemplatesvadd-po.html 增加 订单 前 端 HTML 模板 代码 
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: 销售 掌中 宝 v0.1 (企业 应 用 ) 





【代码 解析 】 页 面 代码 里 比较 特殊 的 部 分 是 销售 项 集 部 分 , 在 这 里 提供 动态 增加 或 减少 订 
单行 项 目 。 
3 . 增加 回 款 记录 
增加 回 款 记录 的 界面 相对 简单 ， 如 图 14.23 所 示 ， 因 为 已 经 选 定 了 订单 ， 并 不 需要 重复 输 
入 过 多 的 信息 。 由 于 这 部 分 数据 在 现实 业务 里 涉及 对 销售 人 员 的 考核 (本 书 的 14.3.9 节 就 有 相 


关 的 报表 项 )， 因 此 往往 回 款 记录 是 需要 核实 审批 的 。 读 者 可 以 考虑 一 下 如 何 完 善 和 增加 这 部 
分 的 功能 。 


< 增加 订单 收 款 ~ 
" 收 基金 额 ， 





收 蒜 日 期 : 
年 /月 上 日 


备注 ， 





图 14.23 ”增加 回 款 记录 功能 页 


【示例 14-15】 实 现 增加 回 款 记录 功能 的 代码 片段 
wwwyjs\servicesjs 服务 模块 里 增加 回 款 记录 代码 片段 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 
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【代码 解析 】 代 码 里 出 现 了 两 个 服务 ， 分 别 是 BaseService 和 PoService。 前 者 用 于 处 理 界 
面 与 业务 逻辑 ， 而 后 者 的 职责 是 处 理 与 后 端 服 务 器 API 的 交互 ， 依 然 简单 一 致 。 
www\templates\add-po-money-receive.html 增加 回 款 记录 前 端 HIML 模板 代码 
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【代码 解析 】 页 面 代码 非常 简单 ， 直 接 获取 表单 输入 的 内 容 与 作用 域 变量 绑 定 。 


14.3.9 实现 报表 显示 与 初步 配置 


相对 于 商机 、 和 拜访 、 客 户 、 订 单 4 大 业务 而 言 ， 报 表 功 能 更 加 特殊 而 且 对 灵活 定制 性 要 求 
更 高 。 因 为 报表 是 管理 的 延伸 ， 其 中 反映 的 考核 数据 就 是 销售 人 员 的 无 形 指挥 棒 ， 每 个 企业 或 
者 实体 都 会 有 自己 的 管理 模式 与 文化 而 对 报表 有 独特 的 要 求 。 图 14.8~ 图 14.10 演示 的 是 可 以 
灵活 设置 排列 顺序 的 报表 集 ， 虽 然 只 是 几 个 报表 组 件 的 组 合 示例 , 但 是 读者 完全 可 以 在 此 基础 
上 自行 扩展 和 加 强 ， 为 特定 的 企业 开发 出 兼 具 个 性 化 和 美观 性 的 移动 报表 来 。 

由 于 销售 掌中 宝 APP 所 带 的 几 个 报表 都 只 是 演示 性 质 ， 其 目的 是 探讨 百度 ECharts 组 件 
的 使 用 和 报表 的 显示 设置 , 因此 本 小 节 不 单独 拆 开 每 个 报表 分 析 , 而 是 分 为 报表 显示 内 容 和 报 
表 显 示 设 置 这 两 部 分 来 介绍 。 


1 . 报表 显示 内 容 


【示例 14-16】 实 现 报表 显示 内 容 的 代码 片段 
www\js\controllers.jjs 控制 器 模块 里 实现 报表 显示 内 容 的 逻辑 代码 片段 
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构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


【代码 解析 】 代 码 里 有 2 个 控制 器 : ReportsCtrl 用 于 报表 功能 页 ， 主 要 是 获取 要 显示 的 子 
报表 顺序 ，srReportCtrl 用 于 页 面 上 的 报表 指令 ， 用 于 为 自 定义 的 sr-report 指令 准备 数据 。 代 
码 中 最 后 一 部 分 是 设置 使 用 ECharts 报表 的 样式 ， 参 数 说 明 请 参考 百度 的 官方 文档 

(http://echarts.baidu.com/ ) 。 


www\js\services.js 服务 模块 里 获取 7 天 内 日 常 工作 执行 报表 数据 代码 片段 


【代码 解析 这 里 的 调用 代码 相当 简单 , 然而 它 同时 返回 了 7 天 内 的 4 类 业务 的 统计 数据 。 
有 兴趣 的 读者 可 以 查看 后 端 服务 器 NodeJS 的 实现 代码 ， 它 是 通过 使 用 了 比较 知名 的 async 模 
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块 的 parallel 方法 完成 的 数据 并 行 查询 ， 执 行 效率 上 比 线性 阻塞 式 应 该 要 更 好 。 
wwwtemplatesvtab-reports .html 报表 功能 页 前 端 HTML 模板 代码 





【代码 解析 】 这 里 的 代码 异常 简单 , 即 根据 设置 动态 加 载 自 定 义 的 sr-report 指令 代表 的 各 
个 子 报表 。 
wwwtemplateseport-dailyjob-main html 7 日 内 日 常 工作 执行 概要 子 报表 前 端 HTML 模板 
代码 





【代码 解析 】 由 于 其 他 的 子 报表 与 本 子 报表 的 代码 逻辑 都 很 类 似 , 所 以 这 里 仅 以 7 日 内 日 
常 工作 执行 概要 子 报表 作为 示例 来 说 明 。 代 码 里 的 line-chart 指令 就 是 在 14.3.2 节 所 提 到 的 
angular-echarts 组 件 的 折线 图 组 件 。 其 中 的 config 属性 用 来 设置 图 的 样式 ，data 用 来 设置 数据 
组 的 内 容 。 而 这 两 个 属性 是 在 srReportCtrl 控制 器 里 通过 作用 域 对 象 设置 的 。 
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【代码 解析 jsrReport 指令 在 这 段 代码 里 获得 了 定义 。 其 中 的 link 属性 函数 用 于 为 template 
属性 里 动态 加 载 子 报表 的 模板 设置 了 文件 路 径 , 从 而 使 子 报表 的 自 定义 排序 顺序 或 是 是 否 出 现 
创造 了 可 能 性 。 


2 . 报表 显示 设置 


报表 显示 的 设置 信息 并 未 存 到 服务 器 上 ， 而 是 放 在 Local Storage 里 。 有 具体 的 报表 显示 设 
置 页 面 如 图 14.10 所 示 。 
【示例 14-17】 实 现 报表 显 示 设 置 功能 的 代码 片段 
www\js\controllers.js 控制 器 模块 里 报表 显示 设置 的 逻辑 代码 片段 
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【代码 解析 】 代 码 直接 将 实现 的 功能 部 分 转交 给 了 ConfigService 服务 完成 。 
wwwNjs\services.js 服务 模块 里 报表 显示 设置 代码 片段 
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【代码 解析 】 如 前 所 述 ， 子 报表 的 显示 位 置 排 序 设置 由 configReportData 函数 从 Local 
Storage 来 提取 ， 和 否则 直接 读 取 appConfig 服务 的 默认 设置 。 而 moveItem 方法 是 与 视图 模板 里 
的 ion-reorder-button 组 件 配合 使 用 的 。 这 部 分 的 内 容 在 9.1.1 节 介 绍 过 。 

www\templates\config-report.html 配置 报表 页 前 端 HTML 模板 代码 








【代码 解析 】 页 面 里 主要 就 是 ion-delete-button 和 ion-reorder-button 的 应 用 ， 它 们 的 结合 
为 子 报表 的 是 否 显示 和 显示 顺序 的 自 定义 创造 了 可 能 。 


1 4 .A 小 结 与 作业 练习 


本 章 介绍 的 销售 掌中 宝 APP 是 一 个 笔者 使 用 了 1 周 左右 业余 时 间 完 成 的 APP (包括 前 后 
端 代码 以 及 市 场 上 同类 APP 应 用 的 理解 总 结 和 简化 特性 规划 工作 ) 。 虽 然 界面 与 功能 尚 显 简 
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陋 ， 但 是 已 经 把 一 个 供 企 业内 部 销售 团队 使 用 的 APP 应 用 基本 结构 搭建 起 来 了 ， 剩 下 的 工作 
就 是 让 APP 在 需求 反馈 和 使 用 抱怨 中 不 断 先 代 成 长 。 而 如 果 使 用 iOS 和 Android 两 个 平台 的 
原生 技术 来 开发 同样 的 功能 , 所 耗费 的 时 间 和 精力 将 会 超出 笔者 投入 的 资源 , 这 也 反映 了 Ionic 
的 长 处 所 在 。 

对 于 使 用 本 书 学 习 Ionic 开发 的 读者 朋友 ， 为 了 让 自己 更 快 地 掌握 这 项 技术 ， 笔 者 推荐 您 
在 阅读 现 有 APP 代码 的 基础 上 ， 可 以 考虑 对 它 做 如 下 功能 补充 来 作为 作业 练习 : 


@ 企业 内 部 审批 事务 的 功能 

@ 更 多 类 型 的 报表 。 

@ 目前 业务 数据 粒度 很 粗 ， 可 以 结合 层级 权限 、 分 页 、 筛 选 和 缓存 来 完善 应 用 ( 如 在 手 
机 端 使 用 SQLite 缓存 产品 、 属 于 自己 的 拜访 、 商 机 、 订 单数 据 ) 。 

在 合适 的 位 置 引 入 cordova 组 件 (如 拍照 功能 ) 。 

启用 地 图 组 件 对 销售 人 员 的 动向 进行 跟踪 。 

开发 离线 模式 ， 可 以 帮助 销售 人 员 在 地 铁 里 或 其 他 访问 网 络 有 困难 的 地 点 延续 工作 。 
其 他 你 了 解 的 所 属 企业 销售 管理 特色 的 功能 。 
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第 15 章 
< 孙 用 的 生成 与 发 布 丑 新 > 


经 过 前 面 章 节 Ionic 开发 基础 的 学 习 和 实战 项 目的 练习 ， 相 信 读 者 已 经 在 浏览 器 、 虚 拟 机 
或 者 测试 机 环境 中 成 功 运行 了 自己 开发 的 APP。 0 ee 入 千 千 万 万 用 户 的 手 
机 里 ， 还 有 应 用 正式 版 的 生成 与 发 布 工作 这 最 后 一 步 需要 完成 。 本 章 主要 分 别 介绍 Android 平 
台 与 iOS 平台 下 APP 应 用 包 的 生成 与 发 布 过 程 ， a 开发 成 果 最 终 成 功 走向 市 场 。 

本 章 主要 涉及 的 知识 点 有 : 

@ 生成 发 布 Android 应 用 

@ 生成 发 布 iOS 应 用 

@ 如 何 更 新 Ionic 应 用 









































生成 发 布 Android 平台 的 应 用 包 


由 于 开发 商 和 平台 的 不 同 ，Android 与 iOS 应 用 的 包 文件 生成 过 程 有 很 大 的 区 别 ， 因 此 本 
节 需 要 分 平台 依次 介绍 它们 。 

为 了 便于 演示 起 见 , 笔者 新 生成 了 一 个 简单 的 APP 命名 为 my-ionic-app， 以 下 的 内 容 均 会 
用 该 APP 来 演示 生成 与 发 布 工作 。 

在 这 之 前 ， 由 Ionic 框架 模板 而 生成 的 项 目 0 于 调试 的 cordova-plugin-console 组 
件 。 为 了 正式 发 行 版 中 对 用 户 屏蔽 用 于 调试 的 控制 台 日 志 , 因此 一 般 会 在 项 目 目录 下 运行 命令 
将 该 组 件 从 项 目 中 移 除 : 

cordova plugin rm cordova-plugin-console 

随后 就 开始 分 平台 来 生成 发 布 应 用 包 了 。 

在 生成 Android 应 用 包 之 前 ,可 能 需要 更 改 应 用 的 一 些 基 本 信息 ,这 些 信息 基 本 都 在 项 目 
目录 的 config.xml 文件 中 ， 读 者 可 以 到 4.4.5 节 阅 读 相关 的 内 容 。 














15.1.1 生成 发 布 版 的 apk 文件 
在 项 目 目录 下 运行 命令 : 


cordova build --release android 


经 过 一 段 时 间 的 编译 和 生成 后 ， 控 制 台 会 提示 生成 完成 信息 以 及 生成 的 apk 文件 的 位 置 
(本 示例 是 项 目 目 录 /platforms/android/build/outputs/apk/android-release-unsigned.apk) 。 


15.1.2 ”生成 用 于 签名 的 私 钥 


蝇 如 果 读 者 已 经 有 了 用 于 签名 的 私 钥 文件 ， 则 可 T 以 下 过 本 步骤。 | 

















生成 私 钥 需 要 使 用 JDK 自 带 的 工具 keytool, 该 文件 一 般 是 在 安装 的 JDK 路 径 的 bin 目录 
下 。 如 图 15.1 所 示 ， 在 命令 行内 运行 命令 并 回答 提示 的 问题 





keytool -genkey -V -keystore my-release-key.keystore -alias ionic-book-test 
-keyalg RSA -keysize 2048 -validity 10000 


则 会 在 当前 目录 生成 名 为 my-release-key.keystore 的 秘 钥 存储 文件 。 
国名 $7 四 nx | 


‘oyaly Ren —k 











图 15.1 生成 用 于 签名 的 私 钥 











量 元 | 命令 中 的 -alias 的 参数 ionic-book-test 是 笔者 自己 指定 的 , 读者 需要 根据 自己 的 应 用 或 者 企 ] 
| 业 规 范 自 行 更 改 。 如 无 必要 ， 其 他 的 参数 可 不 用 更 改 








15.1.3 ”对 apk 文件 签名 


对 apk 文件 签名 需要 使 用 JDK 自 带 的 工具 jarsiger, 该 文件 一 般 也 是 在 安装 的 JDK 路 径 的 
bin 目录 下 。 如 图 15.2 所 示 , 进入 到 15.1.1 节 生 成 的 apk 文件 的 目录 , 并 在 命令 行内 运行 命令 ， 
输入 在 15.1.2 节 输 入 的 密码 


jarsigner -verbose -sigalg SHAlwithRSA -digestalg SHAl1 —keystore 


c:\data\my-release-key.keystore android-release-unsigned ionic-book-test 


则 会 在 当前 目录 生成 名 为 my-release-key.keystore 的 秘 钥 存储 文件 。 
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图 15.2 对 apk 文 件 答 


15.1.4 优化 apk 文件 并 改名 

最 后 是 对 apk 文件 进行 压缩 对 齐 ， 以 优化 运行 时 的 性 能 。 该 步骤 需要 用 到 的 工具 zipalign 
文件 位 于 Android SDK 的 安装 目录 下 的 build-tools 子 目 录 的 某 个 版 本 的 SDK 下 面 。 在 本 书 的 
2.2.1 节 中 读者 应 该 已 经 设置 了 该 Android SDK 的 安装 目录 位 置 。 以 笔者 的 安装 环境 为 例 
(Android SDK 的 安装 目录 为 C:\Users\Thinkpad\AppData\Local\Android\sdk\)， 在 apk 文件 所 
在 的 目录 的 命令 行内 运行 命令 ， 得 到 如 图 15.3 与 图 15.4 的 显示 内 容 : 








C:\Users\Thinkpad\AppData\Local\Android\sdk\build-tools\23.0.2\zipalign -V 4 


android-release-unsigned.apk my-ionic-test.apk 


align 
META-INP, 
MIETR-INP 
5 META-INP/ 


1189786 
1181276 
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3141318 











图 15.4 优化 apk 文 件 ( 续 ) 


这 样 在 apk 文件 所 在 的 目录 最 终 就 生成 了 作为 正式 发 布 文件 的 my-ionic-test.apk， 可 以 用 
于 到 国内 各 个 安 卓 APP 市 场 登记 发 布 了 








15.1.5 发布 Android 应 用 


由 于 国内 安 卓 市 场 的 竞争 和 碎片 化 ， 并 没有 一 个 独 大 的 APP 应 用 市 场 来 发 布 Android 应 
用 。 笔 者 推荐 通过 第 三 方 的 免费 统一 发 布 推送 平台 比如 酷 传 来 做 这 个 事情 。 

读者 可 以 到 酷 传 的 应 用 发 布 网 页 (http:/Wwww-.coolchuan.comy/apps/upload/step1) ， 按 照 其 
网 页 的 向 导 一 步 一 步 完 成 发 布 工 作 。 因 为 该 过 程 相当 简单 易 懂 而 且 是 全 中 文 界面 , 笔者 就 不 在 
本 书 复制 粘贴 整个 页 面 过 程 了 。 








生成 发 布 iOS 平台 的 应 用 


在 正式 生成 发 布 iOS 平台 的 应 用 之 前 ， 读 者 首先 需要 加 入 苹果 开发 者 项 目 〈 需 要 收取 年 
费 ) ， 有 具体 的 加 入 途径 可 直接 参见 苹果 的 官方 网 站 : https://developer.apple.com/programs/。 





BE 为 不 泄露 笔者 个 人 的 开发 账户 信息 ，iOS 的 应 用 包 生 成 与 发 布 部 分 主要 参考 自 Tonic 的 官 | 
方 帮助 文档 (http://ionicframework.com/docs/guide/publishing.html) ， 因 此 相关 图 片 里 的 输 
入 文字 部 分 均 为 英文 内 容 。 
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15.2.1 使 用 开发 者 账户 连接 Xcode 


读者 获得 了 自己 的 苹果 开发 者 的 账户 信息 后 ， 需 要 在 Mac 开发 机 上 打开 Xcode， 并 到 它 
的 菜单 中 选择 Preferences 一 Accounts, 点 击 图 15.5 中 左下 角 的 加 号 按钮 , 依据 提示 将 账户 信息 
输入 到 Xcode 里 。 


Accounts 


7 图 国 息 包 


Bindings Source Control Downloads Locations 


Apple ID: nikola.breznjak@gmail.com 


Description: nikola.breznjak@gmail.com 


View Details... 





图 15.5 使 用 开发 者 账户 连接 Xcode 


15.2.2 签名 


完成 上 一 步骤 后 ,在 图 15.5 中 的 左 方 Apple IDs 栏 选 中 刚 增加 的 账户 ,并 点 击 右 侧 的 “View 
Details” 按 钮 ， 将 弹出 如 图 15.6 所 示 的 对 话 框 。 选 择 其 中 的 “iOS Distribution” 选 项 后 再 点 击 
其 右 侧 的 “Create” 按 钮 。 


Fa Nikola Breznjak 
ni njak@gmail.co' 


Signing Identities 
IOS Development 
ios Distribution 


Mac Development 
Mac App Distribution 
Mac Installer Distribution 
Developer ID Application 
Developer ID Installer 





图 15.6 使 用 Xcode 签名 








关于 签名 更 多 的 信息 可 参见 苹果 官网 的 详细 说 明 页 面 : https://developer.apple.convylibrary 
/ios/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingCertificates/Maintainin 
gCertificates.html. 


一 
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15.2.3 ”设置 应 用 的 标识 名 


随后 ， 需 要 使 用 苹果 的 账户 与 密码 信息 登录 苹果 开发 成 员 中 心 
(https://developer.apple.com/membercenter) ， 为 要 发 布 的 应 用 设置 唯一 标识 符 相 关 信 息 。 成 
功 登 录 后 ， 在 图 15.7 显示 的 界面 里 点 击 “Certificates，Identifiers&Profiles” 按 钮 。 





丹 Developer Member Center 


Programs & Add-ons Your Account 
Hh NiplaBreznjak | Sign ou 


SDKs 


Forums 





discuss with other cevelopers and Apple 





Certificates, Identifiers & Profiles 





@| Manage your ceruficates, identifiers, devices, and profiles Bug Reporting 
Submit bugs or request enhancements to Apls and ceveloper 
ys published on the App Store and Mac App Technical Support 
~ Request technical support with the development of your app 








图 15.7 使 用 Xcode 签名 
在 切换 显示 出 的 如 图 15.8 所 示 的 界面 里 ， 选 择 “iOS Apps” 列 下 的 “Identifiers” 选 项 。 


量 Developer Tadhnalgks 


Resources 。 programs 。 Support 。 Membar Centar 


Certificates ldentifiers & Profiles 


Nikob Breanjak ~ 


国 ios Apps [一 Mac Apps 3 Safari Extensions 


筷 cenitcees 入 | cerificares 图 cenincue* 

全 dentifier: 僵 deifer team More 

人 owce owe: ) Sapn Extensions Devalopment cuda 
Y Safa Eeensions Reference 

人 Provisioning Profies 全 Provisioning Profies 


Learn More Learn More 


| App Distriburion Guide App Distnburion Cuide 








图 15.8 ”选择 为 iOS 应 用 生成 标识 符 


在 切换 显示 出 的 如 图 15.9 所 示 的 界面 里 ， 点 击 右 侧 的 加 号 按钮 来 增加 一 个 新 的 iOS 应 用 
的 标识 符 。 





禾 Developer Technologies 。 Rasources 。 Proorams Support 。 Mamber Center 


Certificates, ldentifiers & Profiles 





ios Apps ~ iOS App IDs +j]LQa 





图 15.9 增加 iOS 应 用 的 标识 符 
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在 切换 显示 出 的 如 图 15.10 所 示 的 界面 里 ， 需 要 类 似 图 中 演示 的 内 容 输入 APP 应 用 的 名 
称 ， 选 中 Explicit App ID 选项 ， 并 在 Bundle ID 输入 栏 中 输入 项 目 目录 的 config xml 文件 中 id 
项 的 内 容 。 





ID Registering an App ID 


The App ID string contains two parts separated by a period (.)—an App ID Prefix that is defined 
as your Team ID by default and an App ID Suffix that is defined as a Bundle ID search string. 
Each part of an App ID has different and important uses for your app. Learn More 


App ID Description 


Name: SuperSimple Calculator 
You cannot use special characters such as @, &, *, 


App ID Prefix 


Value: 8LH87HCB6Y (Team ID) 


App ID Suffix 


© Explicit App ID 
If you plan to incorporate app services such as Game Center, In-App Purchase, Data 
Protection, and iCloud, or want a provisioning profile unique to a single app, you must 
register an explicit App ID for your app. 


To create an explicit App ID, enter a unique string in the Bundle ID field. This string 
should match the Bundle ID of your app. 


Bundle ID: | com.nikola-breznjak.calculator| 


We recommend using a reverse-domaln name style string (Le 





com.domalnname.appname). lt cannot contain an asterlsk (*) 





图 15.10 注册 ios 应 用 的 标识 符 


图 15.10 显示 的 是 最 基本 的 注册 信息 , 如 果 需 要 发 布 的 APP 应 用 还 得 启用 Apple Pay 等 苹 
果 的 服务 ， 再 选择 更 多 的 选项 并 输入 相应 的 参数 ， 具 体 说 明 参 见 苹果 的 官网 文档 : 
https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Mai 
ntainingProfiles/MaintainingProfiles.html。 


15.2.4 开始 应 用 上 架 登记 


登记 应 用 上 架 的 申请 需要 使 用 开发 人 员 的 账户 信息 和 密码 登录 苹果 的 iTunes Connect 网 
站 (https://itunesconnect.apple.com/) 提 交 。 成 功 登 录 后 ,在 如 图 15.11 显示 的 界面 里 点 击 My Apps 
按钮 。 
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iTunes Connect 


News 


New Features and Updates 


all of them to one Apple ID, Check the WWDC 


App Analytics Sales and Trends Payments and 


Financial Reports 
A ax， 
iB 


15.11 iTunes Connect 登录 后 
在 如 图 15.12 显示 的 界面 里 点 击 左 侧 的 加 号 按钮 。 


iTunes Connect My Apps 


Resources and 
Help 





| eznjak ~ 
Nikola Braznak 





图 15.12 iTunes Connect 点 击 My Apps 后 界面 


然后 在 界面 中 弹出 的 下 拉 选 择 栏 中 选择 New App 选项 ， 接 着 在 弹出 的 如 图 15.13 所 示 的 
界面 中 输入 或 选择 APP 应 用 的 名 称 、 运 行 平台 、 主 要 语种 、Bundle ID 和 SKU 号 。 如 果 不 了 
解 这 些 字段 对 应 的 意义 ， 可 以 点 击 图 中 的 问号 按钮 得 到 解释 。 输 入 完成 后 需要 点 击 Create 按 
钮 ， 进 入 如 图 15.14 所 示 的 App 的 选项 信息 设置 界面 。 
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New App 


The App Name you entered has already been 
used. 





Platforms 了 
iOS tvOS 
Name 
Super Bimplistic Calculator 
Primary Language 
English - 
BundlelD 7 


SuperSimple Calculator - com.nikola-breznjak.calculal ~ 


SKU 


ssCalculator 





图 15.13 输入 App 的 基本 信息 界面 





iTunes Connect My Apps ~ Super Simplistic Calculator NE | 人 


kola Sreeh 


New featurea and updates tor Tunes Connect 


Appstorm Features Testftght Actvey 





App Information [Ge] 


|_ “over ， a Su ee eat 


Pricing and Availablily 


Localizable Information Ergith US)~ 
© 1.0 Prepare for Submlsal ee Privacy Pobicy URL 
Super Simpiistic Calcuator httpi//mkola-breznjak com/apps/SuperSimpieDalc ator/prvacy ht 


因 vansown onpurronw 


General Information 


Bandem Pearanevpde Phman Language 

Suparsimple Caouator - com no hear catuetor gh ta 

Yowr Bundle ID com mh- oer an tr caegoy 了 

i PoauctMiy 

ssCalcustor Uss - 
Appe ID 





Lcense Agreement Et 
Apole's Standard License Aoreement 


1061765652 


Rog 
No Rating 


图 15.14 输入 App 的 选项 信息 界面 


在 App 的 选项 信息 设置 界面 ， 需 要 输入 Privacy Policy URL 和 Category 内 容 。 
完成 输入 后 需要 和 暂时 回 到 Xcode 界面 生成 并 上 传 编写 的 App 应 用 ， 然 后 再 回来 继续 上 架 
登记 的 工作 。 
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15.2.5 ”尝试 编译 生成 正式 发 布 版 的 应 用 
在 项 目 目录 下 运行 命令 : 
ionic build --release ios 


经 过 一 段 时 间 的 编译 和 生成 后 ， 控 制 台 会 提示 生成 完成 信息 “BUILD SUCCEEDED”。 


15.2.6 ”使 用 Xcode 打包 APP 应 用 
在 项 目 目录 下 找到 platforms/ios/ 子 目录 下 的 xcodeproject 文件 并 打开 ， 如 图 15.15 所 示 。 








图 15.15 使 用 Xcode 打开 项 目 
xcodeproject 文件 被 打开 后 ， 在 出 现 的 图 15.16 所 示 的 界面 点 击 左 侧 的 APP 应 用 项 目的 工 


程 文件 名 ， 则 会 在 界面 中 间 显 示 关 于 项 目 详情 的 General 视图 。 需 要 注意 在 该 视图 里 核对 APP 
应 用 的 基本 信息 ， 并 在 Team 输入 栏 里 选择 在 15.2.1 节 使 用 的 苹果 开发 者 账户 。 








图 15.16 使 用 Xcode 设置 APP 应 用 项 目 基本 信息 


465 





构建 移动 网 站 与 APP: ionic 移动 开发 入 门 与 实战 


15.2.7 创建 应 用 的 发 布 档 

依然 是 在 Xcode 的 界面 里 , 在 菜单 中 选择 “Product 一 Scheme 一 Edit Scheme”, 在 如 图 15.17 
的 弹出 框 的 左 栏 列表 中 选择 “Archive” 选 项 ， 确 认 右 侧 的 “Build Configuration” 输入 栏 选中 
的 是 “Release”， 随 后 关闭 对 话 框 。 


















从 supersinple Calculator ) 酌 iphone 6s Plus 


on 







Build Configuration ”Release 
Archive Name 


Options 回 Reveal Archivein organizer 





图 15.17 使 用 Xcode 设置 Archive 的 生成 选项 


随后 点 击 图 15.16 顶部 左 方 的 Scheme 按钮 , 在 如 图 15.18 所 示 的 菜单 里 选择 “Generic iOS 
Device” 选 项 。 





丽 iPad2(82) 
珊 iPad2(91) 
六 iPad Air (82) 
六 iPad Air (91) 


现 iPad Retina (8.2) 
丽 iPad Retina (91) 
丽 iphone 4s(82) 


六 iPhone ss(91) 
六 iPhone 6 (82) 





图 15.18 设置 生成 的 Archive 平台 类 型 


随后 在 Xcode 的 菜单 里 选择 “Product 一 Archive”， 经 过 一 段 时 间 的 编译 和 生成 ， 最 终 会 
出 现 如 图 15.19 所 示 成 功 完成 生成 任务 的 提示 界面 。 
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Name Creation Date ~ Verson Arcnive Irformation 


lonic Chat App 
ind Aszt 2016 3:40 pM 


ios Apps 
tonicChat App lonicChat App Mu 24 2016.340PM 004(06) 





Yerson 004(00) 
ldentifier appionic.chat 
Tipe OS App Arcnive 


Download oSYMs. 











图 15.19 成 功 完 成 生成 任务 的 提示 








在 笔者 本 人 的 生成 测试 过程 中 Xcode 会 报错 “ “CordovalCDVViewController.h” file not 
found”。 根 据 Ionic 官方 支持 论坛 上 遇 到 同类 问题 解决 思路 的 讨论 提示 ， 将 
"$(OBJROOT)/UninstalledProducts/$S(PLATFORM NAME)Jinclude" 加 入 到 Build 
Settings 一 Header Search Paths 选项 中 解决 了 问题 。 有 同样 遗 遇 的 读者 可 以 阅读 该 讨论 寻找 解 
决 思路 : https://forumionicframework.com/t/cordova-cdvviewcontroller-h-file-not-found-in-xcode 
-7-1-beta/32232。 








最 后 在 图 15.19 的 提示 框 里 点 击 右 侧 蓝 色 的 Upload to App Store 按钮 ， 依 照 提示 进行 则 能 
顺利 完成 生成 的 应 用 包 文件 的 上 传 。 
到 这 里 就 完成 了 在 Xcode 中 的 打包 上 传 工 作 。 


15.2.8 ”完成 应 用 上 架 登 记 


随后 重新 登录 进入 到 iTunes Connect 网 站 , 进入 到 15.2.4 节 曾 经 到 过 的 如 图 15.14 所 示 的 
界面 中 ， 点 击 左 方 的 “Pricing and Availability”， 在 切换 到 的 如 图 15.20 所 示 的 价格 和 发 布 区 
域 里 设置 相关 的 信息 。 
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iTunes Connect My Apps ~ Super Simpistic Calculator Mea” | © 


App Store Features TestFight Actviy 





Pricing and Availability 


App Information 


Price Schedule Al Piicss and Curences 
© 1,0 Propare for Submissi Price Slat Date 7 End pate 7 
Uspa ~ Other Cumercis November 24, 2015 No End Date 
图 vension on PLaTFORW, 
Availabilty 


Auaiabe in al tertories Edi 


Volume Purchase Program 


® Avelable with a volume discount for educational nsttutions 








» Bitcode Auto-Recompilation 





图 15.20 设置 价格 和 发 布 区 域 信息 


点 击 右上 角 的 Save 按钮 保存 设置 的 信息 后 , 再 次 点 击 左 方 的 “1.0 Prepare for Submission ”， 
在 切换 到 的 如 图 15.21 所 示 的 APP 应 用 预览 与 截屏 部 分 上 传 针 对 每 种 尺寸 设备 的 演示 文件 。 


iTunes Connect My Apps- Super Simplistic Calculalor br 


Appstoe Festues TesFignt 。 Actvty 





iOS App 1.0 
App imformaton Prepare or Sih 


Submi lor Revew 


Pricing and Avaiablty 
Version Information 
PE 一 


aa | Pa | PadPo 


EnelshWS)v 人 





(0 venstow on puarronw 








图 15.21 上 传 每 种 尺寸 设备 的 演示 文件 


随后 滚动 到 页 面 的 下 方 ， 在 图 15.22 所 示 的 界面 里 输入 应 用 APP 的 描述 、 关 键 字 、 服 务 
支持 的 页 面 地 址 和 市 场 推广 活动 的 页 面 地 址 。 
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iOS App 1.0 


®@Pr 


Description Keywords 
日 


A super simple fullscreen responsive calculator application calculator,simple,easy,big 
@specially suited for people who want the buttons to be 
easily clickable. 











Support URL 
http://nikola-breznjak.com/apps/SuperSimpleCalculator/ 


Marketing URL 
http://nikola-breznjak.com/apps/SuperSimpleCalculator/ 








图 15.22 输入 APP 的 描述 、 关 键 字 与 支持 信息 界面 








里 选 











接着 继续 滚动 到 页 面 的 下 方 ， 在 “Build” 部 分 点 击 加 号 按钮 ， 在 图 15.23 所 示 的 界 
择 在 15.2.7 节 通 过 Xcode 上 传 的 APP 应 用 包 。 


Add Build 
Buid Upload Date 
® 图 1.0.0 (1.0.0) November 24, 2015 10:13 AM 





Cancel Done 
图 15.23 增加 Build 的 APP 应 用 


随后 继续 填 入 界面 里 其 他 的 细节 信息 , 然后 顺序 点 击 如 图 15.22 右上 角 的 “Save” 和 “Submit 
for Review” 按 钮 提交 苹果 进行 人 工 应 用 审核 。 最 后 ， 会 出 现 如 图 15.24 所 示 的 需要 填写 的 表 


单 。 
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Export Compliance 


(5 your app desgnedto use cryptography or doos it contan orincorporata cryptograpny? (Select Yes even it your spp is only utiizrg the encryption Yes ONo 
avallable IniOS or OS X) 


Content Rights 


Does your app contain, display or access third-party content Yes ONo 


Advertising Identifier 


Does this app use Ihe Advertising ldeni 
The Advertising Identfler (DFA) saunique D for each IOS device and is te ony way to ofler targeted ads. Users can chocse to imitad targeting on 
theiriOS devic. 





Ensure that you select tne correct answer for Advertisng ldentifer IDFA) usage. # your app does contain tne IDFA snd ycu seiect No, the bnary wil 
be penmanantly relected and you whl have to submll a dierant bnary 








图 15.24 最 后 需要 填写 的 表单 


提交 完成 如 图 15.24 所 示 的 表单 后 ， 在 iTunes Connect 的 “My Apps” 一 节 里 ， 会 发 现 被 
提交 审核 的 应 用 进入 了 “Waiting for review” 状 态 ， 如 图 15.25 所 示 。 


Super Simplistic 
Calculator 


® iOS 1.0 Waiting For Review 





图 15.25 “等待 审核 的 应 用 状态 


至 此 开发 者 的 任务 就 完成 了 ， 剩 下 的 就 是 等 待 苹果 的 人 工 审核 成 功 后 APP 应 用 会 被 直接 
发 布 到 Apple Store 与 广大 用 户 见 面 了 。 


与 .本 更 新 应 用 


根据 APP 应 用 的 运营 与 用 户 的 反馈 ,移动 开发 者 不 可 避免 地 要 碰 到 APP 的 更 新 升级 问题 。 
使 用 Ionic 框架 开发 的 APP 在 更 新 升级 版 本 上 需要 做 的 工作 非常 简单 ， 直 接 修改 项 目 目录 的 
config.xml 文件 中 widget 元 素 的 version 属性 为 新 的 版 本 号 , 再 根据 15.1 和 15.2 节 的 内 容重 复 
整个 发 布 过 程 即 可 。 
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15.4 4 千 


本 章 主要 介绍 了 如 何在 Android 平台 与 iOS 平台 下 生成 APP 应 用 包 并 发 布 的 详细 过 程 ， 
以 帮助 读者 的 开发 成 果 最 终 成 功 走 向 市 场 。 至 此 本 书 的 内 容 也 基本 画 上 了 句号 , 希望 读者 朋友 
阅读 完 本 章 后 能 顺利 将 自己 编写 的 APP 应 用 发 送 到 市 场 ， 成 为 有 成 功 作品 的 移动 开发 者 或 创 
业者 。 
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